Practical guide
How to use Color Contrast Checker
Color Contrast Checker measures the readability of foreground and background colors using WCAG contrast ratios. It supports early accessibility decisions for text, buttons, labels, and interface states.
Step by step
- Enter or pick foreground and background HEX colors.
- Read the contrast ratio and AA or AAA results for normal and large text.
- Adjust either color and retest it in the real component, including hover, focus, and disabled states.
Example
Foreground #17212b on background #ffffffA calculated ratio with WCAG AA and AAA pass or fail badgesHow it works
sRGB channels are converted to linear values, combined into relative luminance, and compared with the WCAG contrast-ratio formula from 1:1 to 21:1.
Important limitations
- A passing ratio does not guarantee overall accessibility or readable typography.
- Logos, gradients, images, transparency, and dynamic backgrounds require testing in context.
Real workflows
When this tool is useful
Design review
Check proposed text and background colors before a component is implemented, including normal, hover, disabled, and focus states.
Accessibility QA
Reproduce a reported contrast problem with exact color values and compare the ratio with the relevant WCAG text target.
Palette adjustment
Explore nearby foreground or background values while preserving brand intent and keeping the result readable in the real interface.
Review the result
What to check before using the output
Select the correct criterion for text size and weight, and test the colors that are actually composited on screen. Opacity, gradients, images, antialiasing, and state changes can alter effective contrast.
- Use the final composited colors.
- Check every interactive state.
- Confirm text size and weight.
- Test the implemented component, not only the palette.
Choose the right method
When another tool is better
Use an accessibility audit in the rendered product for full-page checks, keyboard behavior, semantics, focus visibility, zoom, motion, and non-text contrast. A ratio is only one requirement.
Privacy and browser behavior
Color values contain no uploaded document, and calculation is local. Screenshots used to obtain colors may still include confidential UI or customer information.
Frequently asked questions
What ratio does normal text need?
WCAG AA uses 4.5:1 for normal text and 3:1 for large text; AAA uses higher thresholds.
Does this test color blindness?
No. Contrast is one requirement; information should also avoid relying on color alone.