1

I'm in the middle of updating the colours of our app and making them as consistent as possible, but also trying to bring them in line with the WCAG AA rating for contrast.

One area I'm unsure if I need to do this for, is an alert/info message that is displayed say at the top of a form to give users info about any warnings, or errors for example.

warning message

In this example, the text has an AA contrast of 7.09:1, however the yellow box itself is only 1.39:1 and therefore fails, however the containing box is not a component, or anything a user needs to directly interact with so do I actually need to worry about the contrast here? From a design perspective, I'd prefer a lighter colour (and on the other message types as well) but am just conscious of the contrast

2 Answers 2

2

That example you have given is perfectly acceptable.

Colour contrast applies to control labels, text etc. The contrast of decorative parts are not important (unless you put text in an image like a mad lad in which case contrast matters here.)

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

The information here should guide you through what you need to consider, quite a few scenarios at the bottom.

The golden rule is - if you can read it, make the contrast high, if the text and imagery make sense without a background colour then the contrast doesn't matter for the background (i.e. if you removed the background entirely would the text and image still make sense).

2

You can have a border stroke around the box in a dark color to increase the contrast to 3:1 (Minimum requirement for SC 1.4.11 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)

Also If you have interactive icons inside the box like dismiss icon or expand/collapse icon make sure it has a minimum of 3:1 contrast as well. Best of luck with your design overhaul.

1
  • Thanks, not actually a designer by trade - we just don't have a big enough team to outsource :P
    – PaReeOhNos
    Dec 2, 2019 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.