Color contrast
Aa Text PreviewBody text compared with large text
Contrast15.7:1
Body AAPass
Body AAAPass
Large AAPass
Color contrast
Check WCAG contrast ratio between foreground and background colors
Browser local processingInputs and files are not uploaded to our serverData processing
Instructions
Check text color visibility
Verify readability when designing button, body text, and brand color combinations.
1Choose text and background colors
2View contrast score
3Adjust to valid combination
After completionGet more readable color combinations.Select two colors first
Did this tool solve your problem?Tell us after completing the action, your feedback helps improve tools.
Choose a contrast threshold for the text size
The checker calculates relative luminance for opaque colors. WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA normal text requires 7:1.
An example to check
Input and settings
#000000 on #ffffffExpected result
21:1Black and white reach the maximum 21:1. Enter the actual foreground and background, and assess large text using its size and weight as well as its colors.
Scope and limitations
- Transparency, images and gradients change the effective background. A single HEX pair cannot certify a whole page.
- Contrast is one part of accessibility. Also check focus, labels, keyboard operation and cues that do not rely on color.
References
Does a result differ from this reference? Share steps without private data. Report a problem