- An article by Dave House, describing how WCAG 2.1 Non-text contrast has enough wiggle-room in it that designers often dismiss it, saying “UI elements don’t need to meet this requirement”. He explains: the success criterion states “if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast”. Therefore, for example, a “Submit” button whose background colour has low contrast is still recognisable with the background colour removed, provided it is in the context of a form, and thus doesn’t fail the criterion.
- Dave suggests a simple test: for every interactive UI element with a contrast of less than 3:1, remove the thing that is low contrast (be it the text, the background colour, the border, etc). Then review the page and see if it still makes sense. The argument is hard to swallow when Dave uses the Facebook and Google landing pages as examples – if they can’t get it right, what chance do the rest of us have? – but it’s a good rule of thumb nonetheless, and a useful design tip to keep in your arsenal.
Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.