Five explicit outcomes
The color contrast checker labels AA normal text, AAA normal text, AA large text, AAA large text, and the 3:1 interface reference separately. You do not have to remember which threshold belongs to which use.
Free WCAG 2.2 design tool
Color contrast checker for WCAG AA and AAA
Use this color contrast checker to measure any foreground and background, read the relevant text and interface thresholds, preview a real component, and find a nearby passing color without sending your palette anywhere.
Updated July 25, 2026
color contrast checker
What does this color contrast checker test?
This color contrast checker calculates the WCAG contrast ratio from two valid HEX colors. It reports AA and AAA results for normal and large text, the 3:1 reference used for visible interface components, a live preview, and a palette matrix. The color contrast checker can also search HSB values for a nearby foreground that reaches 4.5:1 or 7:1. A passing ratio is useful evidence, but it does not certify an entire page or product.
From one ratio to a usable design decision
The color contrast checker keeps the number, the visual context, and the next correction together.
A preview that looks like UI
The color contrast checker applies the pair to a heading, paragraph, button, and badge. This makes obvious mistakes easier to notice before the values move into a component library.
A palette-wide matrix
Add two to eight colors and the color contrast checker measures every unique pair. That exposes useful foreground/background combinations that a single-pair calculator would leave hidden.
WCAG 2.2 · HEX · HSB
Use the color contrast checker
Enter two HEX colors. Every result updates locally and immediately.
Pass · AA normal text
Readable interface preview
This sample uses your foreground for text, borders, and controls over the selected background.
Find a nearby passing foreground
The search keeps hue when possible, then changes HSB saturation and brightness by the smallest practical amount.
All calculations stay in this browser.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Palette contrast matrix
Add two to eight colors. Each cell measures the row color against the column color.
| Color | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Below 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Below 3:1 |
3#2563EB | 2.84:1Below 3:1 | 4.95:1AA | — | 2.41:1Below 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Below 3:1 | 2.41:1Below 3:1 | — |
WCAG 2.2 contrast thresholds at a glance
The color contrast checker reports the normative text thresholds and keeps the non-text 3:1 reference distinct.
| Use | Level | Minimum ratio | What it means |
|---|---|---|---|
| Normal text | AA | 4.5:1 | Text below the WCAG large-scale definition. |
| Large text | AA | 3:1 | At least 24 CSS px regular or about 18.5 CSS px bold. |
| Normal text | AAA | 7:1 | The enhanced contrast target for smaller text. |
| Large text | AAA | 4.5:1 | The enhanced target for large-scale text. |
| UI and graphics | AA | 3:1 | Required visual information against adjacent colors, with exceptions. |
A three-step contrast review
Use the color contrast checker as a repeatable review, not a one-time screenshot.
1. Test the exact production colors
Paste the actual foreground and background tokens into the color contrast checker. Do not sample an anti-aliased screenshot if the source HEX values are available. Test default, hover, active, disabled, focus, error, and selected states separately because each state can change the adjacent colors.
2. Match the threshold to the content
Use 4.5:1 for ordinary AA text and 7:1 for the AAA target. Only use the lower large-text thresholds when the rendered size and weight really qualify. For essential boundaries, icons, and state indicators, review the non-text 3:1 rule instead of treating every colored object as text.
3. Verify the finished component
After the color contrast checker passes, inspect the component at browser zoom, in both themes, and with real copy. Confirm focus visibility, color-independent cues, readable states, and nearby backgrounds. Automated arithmetic catches a ratio; human review catches context.
How the color contrast checker calculates a ratio
The color contrast checker linearizes sRGB and applies the WCAG luminance weights: 0.2126 red, 0.7152 green, and 0.0722 blue. It then calculates (L1 + 0.05) / (L2 + 0.05), with the lighter value in L1. Identical colors return 1:1; black and white return 21:1.
Swapping the colors does not change the ratio, but context still matters. Opacity, gradients, images, blending, and shadows can create different pixels. Composite transparency first, then enter the final solid colors in the color contrast checker.
Color contrast checker release checklist
Run these checks before accepting a color contrast checker result as release evidence.
- 01
color contrast checker: Use source HEX values instead of eyedropper samples from compressed screenshots.
- 02
color contrast checker: Check light and dark themes as separate foreground/background systems.
- 03
color contrast checker: Test default, hover, focus, active, selected, error, and disabled states.
- 04
color contrast checker: Apply 4.5:1 to ordinary AA text unless a documented exception applies.
- 05
color contrast checker: Apply 7:1 when the design requirement explicitly targets AAA normal text.
- 06
color contrast checker: Confirm that large text meets both the size and weight definition.
- 07
color contrast checker: Review essential icons, boundaries, and state indicators against 3:1.
- 08
color contrast checker: Composite transparency before entering the final visible colors.
- 09
color contrast checker: Sample the weakest area when text sits over a gradient or image.
- 10
color contrast checker: Keep a non-color cue for errors, links, selections, and status changes.
- 11
color contrast checker: Inspect keyboard focus against both focused and unfocused surroundings.
- 12
color contrast checker: Zoom the finished interface and confirm content remains usable.
- 13
color contrast checker: Test real copy because line weight and placement affect perception.
- 14
color contrast checker: Record the component, state, tokens, threshold, result, and review date.
- 15
color contrast checker: Use the palette matrix to find approved pairs, not universal combinations.
- 16
color contrast checker: Recheck ratios whenever a shared design token changes.
- 17
color contrast checker: Review high-contrast and forced-colors behavior where the product supports it.
- 18
color contrast checker: Pair automated ratios with keyboard, screen-reader, and visual review.
Primary WCAG evidence behind the results
The color contrast checker follows the published WCAG 2.2 formula and thresholds; these official sources remain the authority.
- WCAG 2.2 Success Criterion 1.4.3 sets 4.5:1 for normal AA text and 3:1 for large AA text. WCAG 2.2 contrast criteria
- Success Criterion 1.4.6 sets 7:1 for normal AAA text and 4.5:1 for large AAA text. WCAG 2.2 contrast criteria
- Success Criterion 1.4.11 sets 3:1 for required visual information in UI components and graphical objects against adjacent colors. WCAG 2.2 non-text contrast
The AA text criterion states:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Official color contrast checker sources
Continue your color workflow
Color contrast checker questions
What is a good color contrast ratio?
For ordinary text, this color contrast checker uses 4.5:1 as the WCAG AA minimum and 7:1 as the AAA target. Large text uses 3:1 for AA and 4.5:1 for AAA. Required UI and graphic information generally uses 3:1 against adjacent colors.
Does 3:1 pass WCAG AA?
It can pass for qualifying large text and for required non-text visual information, but it does not pass ordinary AA text. The color contrast checker shows these outcomes separately so a 3:1 result is not mistaken for a universal pass.
Can the color contrast checker test transparency?
The color contrast checker accepts solid HEX colors. If a foreground or background is transparent, first composite it over the real underlying color and test the visible result. Gradients and images should be checked at their weakest local contrast.
How does automatic adjustment choose a color?
The color contrast checker searches HSB saturation and brightness values while holding hue when possible. It chooses a nearby foreground that reaches the selected ratio. Review the suggestion in context because a numerical pass may still conflict with brand hierarchy or state meaning.
Does a passing result make my page accessible?
No. A color contrast checker verifies a mathematical relationship between selected colors. Complete accessibility also requires semantic structure, keyboard support, visible focus, useful labels, alternatives, predictable behavior, and testing of the complete page or process.