Free · Local · WCAG 2.x
Color Contrast Checker
Compare any text and background colors, see the exact contrast ratio and check WCAG AA or AAA readability before you ship.
No upload, account or external API. Your colors stay in this browser.
Check text and background colors
Use the color pickers or enter a 3- or 6-digit hex value. Results update immediately.
Contrast ratio—
Waiting for valid colors
The quick brown fox jumps over the lazy dog.
Readable heading preview
Guaranteed AA text option
Best black or white text
Choose valid colors to calculate a suggestion.
CSS color pair
—What the contrast results mean
Normal text
Body copy and smaller labels need at least 4.5:1 for AA and 7:1 for AAA.
Large text
Text at least 24px regular or about 18.7px bold needs 3:1 for AA and 4.5:1 for AAA.
UI components
Meaningful boundaries, icons and graphical objects generally need 3:1 against adjacent colors.
Color contrast questions
What contrast ratio should I target?
For WCAG 2.x level AA, target at least 4.5:1 for normal text and 3:1 for large text. A higher ratio is usually easier to read.
Does passing contrast guarantee accessibility?
No. Contrast is one requirement. Also check typography, focus states, zoom, motion and whether meaning depends on color alone.
How is the ratio calculated?
The checker converts sRGB values to relative luminance, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05.
Starting from an image? Extract its dominant colors first with the Image Color Palette Extractor, then test the pair here.