Color Contrast Checker
Check the WCAG contrast ratio between two colors and see if they pass AA and AAA accessibility levels.
Large sample text
Small sample text shows how readable the body copy is at this contrast.
Check the color contrast between any text color and background with this free WCAG color contrast checker. Pick or paste two hex colors and instantly see the contrast ratio plus whether the pair passes WCAG 2.1 level AA and AAA for both normal and large text. A live preview shows real sample text in your colors, and everything is calculated in your browser — no sign-up and nothing uploaded.
What is a color contrast checker?
A color contrast checker measures how much a text color stands out from its background and reports the result as a contrast ratio. The Web Content Accessibility Guidelines (WCAG) define ratios from 1:1 (no contrast) up to 21:1 (black on white) and set minimum thresholds so that text stays readable for people with low vision or color blindness. This tool computes the ratio from the relative luminance of each color and tells you which accessibility levels the combination meets.
How to check color contrast
Set your text and background colors and read the results, which update live as you change either color.
- Pick a text color with the swatch or type a hex value such as #1f2937.
- Pick a background color the same way, for example #ffffff.
- Read the contrast ratio and the pass or fail badges for AA and AAA.
- Use Swap colors to test the reverse combination instantly.
- Adjust either color until you hit the level you need.
WCAG AA and AAA contrast requirements
WCAG sets two conformance levels. For level AA, normal text needs a contrast ratio of at least 4.5:1 and large text at least 3:1. For the stricter level AAA, normal text needs at least 7:1 and large text at least 4.5:1. Large text means roughly 18pt (24px) regular or 14pt (18.66px) bold and above. Aim for AA as a baseline and AAA where you can for the most readable, accessible interfaces.
Why use this color contrast checker?
- Shows the exact WCAG contrast ratio for any two colors.
- Pass/fail badges for AA and AAA, normal and large text.
- Live preview renders sample text in your chosen colors.
- Color pickers and hex fields, with a one-click swap.
- 100% free with no ads, sign-up, or limits.
- Runs entirely in your browser — your colors never leave your device.
Frequently asked questions
What is a good contrast ratio?
Aim for at least 4.5:1 for normal body text and 3:1 for large text to meet WCAG level AA, which is the common legal and design baseline. For the stricter AAA level, target 7:1 for normal text and 4.5:1 for large text. Higher ratios are always more readable, with pure black on white reaching the maximum of 21:1.
How is the contrast ratio calculated?
The ratio uses the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color. Relative luminance is computed from the gamma-corrected red, green, and blue channels, weighted 0.2126, 0.7152, and 0.0722. This tool does all of that math for you automatically.
What counts as large text?
WCAG defines large text as about 18pt (24px) or larger for regular weight, or 14pt (around 18.66px) or larger for bold. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because bigger letters are easier to read at lower contrast.
Do hex shorthand codes work?
Yes. You can enter three-digit shorthand like #abc or full six-digit hex like #aabbcc, with or without the leading #. Shorthand is expanded automatically before the contrast is calculated.
Does it check transparency or opacity?
No. Contrast is measured between two solid colors. If your text or background uses transparency, first work out the effective color it renders over its backdrop, then enter that solid hex value here.