Contrast Ratio – Accessibility Glossary
What is a Contrast Ratio?
The contrast ratio indicates the difference in brightness between the foreground and background colors, for example for text and background. It is a key criterion for digital accessibility and is particularly important for people with visual impairments.
According to the WCAG guidelines, the following minimum requirements apply:
- Normal text: At least 4.5:1
- Large text (from 18pt or 14pt bold): At least 3:1
- Enhanced level (AAA): 7:1 for normal text
Too little contrast can make content illegible or cause unnecessary eye strain. The contrast ratio should therefore always be checked - e.g. with tools such as the WCAG Contrast Checker. Even small adjustments can have a big impact on usability.
The contrast ratio is expressed as a number between 1:1 (no difference) and 21:1 (black on white). At level AA, WCAG requires at least 4.5:1 for normal text and 3:1 for large text as well as for important controls and icons. Level AAA asks for 7:1 and 4.5:1 for large text respectively. Even a medium grey on white often fails.
Sufficient contrast does not only help people with low vision or colour blindness. Text also stays readable in sunlight on a smartphone, on poor screens or in old age. Particularly critical are light fonts on images, placeholder text in form fields and disabled buttons that still carry information.
You can check colour pairs with contrast calculators or the browser’s developer tools. Define the approved combinations in your design system so that editors and developers do not have to decide anew every time. Do not forget states such as hover and focus, because contrast has to be right there as well.
A look at your brand colours helps in practice: if the main colour is too light for text, define a darker variant for type and links and use the original colour only for surfaces. That way the brand stays recognisable without readability suffering. Plan the check into the design process, because later colour changes are more costly and affect many components at once.
In short: Visual Contrast Ratio: Enhancing Accessibility & Readability.
