Contrast checker
Calculates the WCAG contrast ratio between text and background color and evaluates normal and large fonts according to AA and AAA.
This example shows the selected text and background color directly on top of each other.
Assessment
The complete accessibility audit also checks alternative texts, form labels, link texts, landmarks, titles, language and other technical signals.
Starting the auditWhy Color Contrast Is Part of Accessibility
Sufficient contrast makes texts, buttons, hints and form errors more readable. Especially people with visual impairments, older users and users in unfavorable lighting conditions benefit from this.
The WCAG distinguishes normal and large font. Normal font usually requires a higher contrast ratio than large or bold font.
Typical areas of application
- Primary and secondary buttons.
- Navigation, breadcrumbs and footerlinks.
- Form instructions, error messages and mandatory field markings.
- Badges, price labels, tables and dashboard KPIs.
Contrast Checker FAQ
What contrast is necessary for normal writing?
For WCAG AA, a ratio of at least 4.5:1 is typically used in normal font. For large fonts, a lower limit applies.
Does the Contrast Checker check the whole website?
No, this tool calculates individual color combinations. For a technical website audit, use the accessibility website audit.
Checking contrast not only in the design system
A pair of colors can exist in the style guide and still be problematic on real pages when used on images, gradients, deactivated states or small badges. Therefore, critical UI states should also be examined in context.
Prioritisation in practice
- Prioritize buttons, links, error messages and forms
- Test hover, focus, disabled and alert states separately
- Evaluate text on images or transparent overlays with particular care
Next meaningful check
For entire websites, the WCAG Checker supplements the individual measurement with URL-based indications of further accessibility risks.
When Contrast Finds Are Critical
Critical are text and controls that trigger decisions: prices, error messages, form instructions, primary buttons, status badges and navigation. If these elements are difficult to read, not only does accessibility suffer, but also the completion rate.
Contrast should also be checked according to conditions. Hover, focus, disabled buttons, warnings and text on images often differ significantly from the default state in the design system.
Judge grey text on white
Practical example · for illustration
Starting position
Enter #777777 as text color and #FFFFFF as background.
Classify the findings
The ratio is approximately 4.48:1. This just misses 4.5:1 for normal text; do not rely on a rounded limit.
Specific amendment
Text color, for example, to darken to #767676; this gives about 4.54:1. Large font and non-textual elements have other requirements.
Control and border
Check the actual combination including hover, focus, transparency and background images in the layout. The computer only evaluates the entered colors.