1.4.3 Contrast (Minimum) Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

[View on W3C.org]

Testing & Remediation

How to test: Using a color contrast checker is a great way to check the contrast ratios that are present on your site. WebAIM provides an easy to use contrast ratio checker that is free to use. Another method is to use the formula that the W3C has put together. This formula and other relevant details can be found on the G18 technique page on the W3C website. How to remediate: If the text is less than 18 point and not bold (and less that 14 if bold):
  • Update the background color, text color or both to meet the 4.5:1 minimum contrast ratio
If the text is greater than 18 point and not bold (and at least 14 point if bold):
  • Update the background color, text color or both to meet the 3:1 minimum contrast ratio

Questions and Answers

Are animated gifs okay to have?

If I have a gif on a site that loops continuously. Is that okay or does it violated the 'can't have repeating flashing stuff' rule?

What are the best accessible wordpress sliders?

I see a lot of WordPress websites (and websites in generally really) using sliders for images and information. I can see how it would be really easy to make an accessible slider. Are there any 'out of the box' accessible WordPress sliders?