24. Color contrast is insufficient (AA)


Color contrast incorrect example

Description: The color of the text and the color of the background are not in sufficient contrast to each other.

Context: For compliance, all text must be displayed in a way that provides sufficient contrast against it’s background. Users with vision impairments may find it impossible to read content they ordinarily should if colors are chosen poorly. Sometimes the difference between a compliant level of contrast and a non-compliant level is just a few shades.

How to fix it: The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text. Note: Contrasts are not relevant where content is hidden. But make sure that for hidden content, which becomes visible when receiving focus, the contrast ratio is sufficient. Insufficient contrast between text and its background can give problems for users with visual impairments and color blindness, but it can also affect a lot of other users, leading to important text potentially being overlooked.

Color contrast correct example

Techniques: G115G140H49