Color Contrast Checker
Check text against a background with WCAG contrast ratios. See AA and AAA results for normal and large text, then try a nearby passing foreground color.
The quick brown fox
This is a normal-size text preview with your chosen colors.
Large text preview
Suggested foreground colors
Closest options found by changing lightness while keeping the hue and saturation near your original color.
How to use it
- Enter the foreground and background HEX colors.
- Read the ratio and four WCAG text results.
- If a pair fails, copy a suggested foreground and test it in your design.
Practical uses
- Check button labels and body text before shipping a UI.
- Compare brand colors against light or dark surfaces.
- Find a nearby text color that meets AA or AAA.
Good to know: This tool checks color contrast only. It cannot assess font size, weight, disabled states, text over photos, or other accessibility requirements. The nearest suggestions preserve hue and saturation while adjusting lightness; some backgrounds cannot reach AAA at all.
Frequently asked questions
What contrast ratio does WCAG AA require?
AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Does a passing ratio make a page fully accessible?
No. Contrast is only one part of accessibility. Test focus indicators, keyboard operation, labels, layout, and content too.
Explore more color tools
Continue your workflow with another focused tool.
Image Color Picker
Pick an exact pixel color from an image and copy HEX, RGB, or HSL.
Color Palette Generator From Image
Extract, edit, preview, and export dominant colors from a photo.
HEX to RGB Converter
Convert HEX and RGB both ways, including optional alpha.
CSS Gradient Generator
Create linear, radial, and conic gradients with editable stops.