Contrast (Minimum)
Text and images of text have a contrast ratio of at least 4.5:1, with exceptions for large text (3:1), incidental text, and logotypes.
What it means
The intent of this success criterion is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology. For all consumers of visual content, adequate light-dark contrast is needed between the relative luminance of text and its background for good readability. Many different visual impairments can substantially impact contrast sensitivity, requiring more light-dark contrast, regardless of color (hue). For people with color vision deficiency who are not able to distinguish certain shades of color, hue and saturation have minimal or no effect on legibility as assessed by reading performance. Further, the inability to distinguish certain shades of color does not negatively affect light-dark contrast perception. Therefore, in the recommendation, contrast is calculated in such a way that color (hue) is not a key factor. Text that is decorative and conveys no information is excluded. For example, if random words are used to create a background and the words could be rearranged or substituted without changing meaning, then it would be decorative and would not need to meet this criterion. Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles. 18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio. (See The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large Print under Resources ). "18 point" and "bold" can both have different meanings in different fonts but, except for very thin or unusual fonts, they should be sufficient. Since there are so many different fonts, the general measures are used and a note regarding thin or unusual fonts is included in the definition for large-scale text.
Failing example
<!-- Fails: light gray text on white — contrast ratio ~2.3:1 -->
<style>
.hint { color: #aaaaaa; background: #ffffff; }
</style>
<p class="hint">Your password must be 8+ characters.</p>How to fix it
<!-- Pass: darker gray meets 4.5:1 on white -->
<style>
.hint { color: #767676; background: #ffffff; }
/* #767676 on #ffffff = 4.54:1 — just over the threshold */
</style>
<p class="hint">Your password must be 8+ characters.</p>How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →