This document is in beta. Help us by reporting issues via Github or email
On this page:
Make sure that text has enough contrast against the background colour.
Text must have a contrast ratio of at least 4.5:1 (or 3:1 in some cases) against its background colour.
‘Large scale’ text is defined as text that is larger than 18pt/24px, or 14pt/18.5px and bold.
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
- 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.
See the W3C’s detailed explanation of this guideline with techniques and examples.
User tools like Sketch’s Stark plug-in, Colour Contrast Analyser to make sure that text has sufficient contrast.
This document is in beta. Help us by reporting issues via Github or email