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.
- 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.