WCAG contrast checker
Check a color pair against clear thresholds.
Check a foreground and background across text and interface thresholds, preview real states, apply practical fixes, and copy a plain-language accessibility report.
Free color utility
Contrast
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #10212B foreground on #FBFAF5 background
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Accessibility
Contrast decision
Instructions
- Enter the text color and background color you want to test.
- Choose a contrast target, then adjust either the text or background color to the lowest ratio that passes that selected target.
- Move the lightness sliders to adjust either color while keeping its hue and saturation.
- Use Swap colors to quickly check the pair in the opposite foreground and background roles.
- Review the badge, ratio, WCAG results, preview text, and copy-ready report for QA notes and handoff.
Transparent colors are not composited in this checker. Use resolved foreground/background colors for accurate contrast.
Supports WCAG 2.x color-contrast checks; it does not certify accessibility or legal compliance.
Target: AA normal text - pass. This pair reaches the selected color-contrast threshold; typography, semantics, component states, borders, icons, and focus treatment still need separate review in context.
- Ratio
- 15.77:1
- AA normal text
- Pass
- AAA normal text
- Pass
- AA large text
- Pass
- AAA large text
- Pass
- AA UI/non-text
- Pass
Selected target passes: AA normal text. This pair passes AAA for normal text and all lower WCAG contrast thresholds.
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Contrast.
Methodology pages
Related guides
How it fits
Check more than one pass/fail threshold.
Contrast results show AA normal text, AAA normal text, AA large text, AAA large text, and UI/non-text thresholds from the same foreground/background pair.
WCAG matrix
See AA normal text, AAA normal text, AA large text, AAA large text, and UI/non-text checks together.
Swap and report
Swap foreground/background values, tune lightness, and copy a plain-language contrast report.
Just-passing alternatives
Adjust text or background colors toward the lowest ratio that passes the selected contrast target.
Quick overview
Hue Codex Contrast Checker supports WCAG 2.x color-contrast checks by comparing a foreground and background, calculating their ratio, and reporting threshold results for AA normal text, AAA normal text, AA large text, AAA large text, and UI/non-text contrast. It can suggest a text or background color tuned to the selected target, provides lightness controls, and exports a copy-ready report. A passing color pair does not certify the accessibility or legal compliance of a page, component, or product.
- Use it to test whether foreground and background colors are readable before using them for text or UI states.
- Normal text targets at least 4.5:1 for AA and 7:1 for AAA.
- Large text targets at least 3:1 for AA and 4.5:1 for AAA.
- Meaningful UI components and non-text graphical objects commonly use a 3:1 contrast target against adjacent colors.
- Choose a target first, then tune text or background lightness toward the lowest ratio that passes that target.
- Use the lightness sliders when you want manual control without changing the color hue.
What the Hue Codex contrast checker does
The Hue Codex contrast checker compares a foreground color with a background color and calculates the contrast ratio between them. The result is shown as a ratio such as 4.5:1, along with pass or fail results for common WCAG text and UI thresholds.
The checker is designed for practical color decisions. It shows a live text preview, lets you swap foreground and background colors, tunes either side to a just-passing result for the selected target when possible, provides lightness sliders for manual adjustment, ranks readable text color suggestions, keeps the color pair in the URL, and exports a plain-language report that can be copied into documentation or issue notes.
A contrast ratio compares the relative luminance of two colors. In WCAG 2.x contrast checks, ratios range from 1:1 for identical luminance to 21:1 for maximum black and white contrast.
WCAG contrast thresholds
Hue Codex reports the most common WCAG 2.x contrast thresholds together so you can see whether the same color pair works for body text, large text, and meaningful interface graphics.
| Check | Target ratio | Common use |
|---|---|---|
| AA normal text | 4.5:1 or higher | Body copy, labels, form text, navigation text, and most readable interface text. |
| AAA normal text | 7:1 or higher | Stronger readability targets for body copy and dense text. |
| AA large text | 3:1 or higher | Large headings and large-weight text where WCAG permits a lower ratio. |
| AAA large text | 4.5:1 or higher | Stronger readability target for large text. |
| UI component / non-text | 3:1 or higher | Meaningful component boundaries, icons, focus indicators, and graphical objects against adjacent colors. |
How to use the contrast checker
Start with the actual foreground and background colors from your design. If the pair fails, choose the target you need, then use the text or background adjustment button to tune one side toward the lowest passing ratio for that target. You can also adjust lightness manually, swap the pair when the roles might be reversed, or use a ranked text suggestion as a safer foreground candidate.
- Enter or pick the foreground text color.
- Enter or pick the background color.
- Choose a contrast target, then adjust text or background when you want one side tuned to the lowest passing ratio for that target.
- Move either lightness slider when you want to tune the color manually.
- Review the contrast ratio and pass/fail matrix.
- Use the live preview to sanity-check the pair visually.
- Review readable text color suggestions if the pair fails.
- Copy the contrast report for accessibility notes, QA, or design-system documentation.
Best uses for contrast checks
Contrast checking is useful whenever a color pair needs to communicate information. The format of the color value does not matter as much as the actual foreground/background relationship.
Body text and labels
Check paragraph text, form labels, navigation links, captions, table text, and dense UI copy against their real backgrounds.
Buttons and controls
Test button text, icon buttons, input borders, selected states, disabled states, and other component details.
Focus and interaction states
Use the focused-state preview for a quick foreground/background check, then open the focus-ring tool when an outline touches multiple adjacent colors.
Design-system QA
Copy reports into color-role documentation so approved foreground/background pairs are easier to reuse consistently.
Readable color suggestions
When a selected pair fails or feels weak, Hue Codex can adjust the text color or background color by lightness to find the lowest contrast ratio that passes the selected target, when that is possible against the fixed color.
Hue Codex also ranks generated text candidates against the chosen background. Suggestions include dark and light options plus hue-aware alternatives, sorted by contrast ratio.
Suggestions should still be reviewed in context. A color can pass mathematically and still be wrong for brand tone, hierarchy, disabled-state conventions, or surrounding visual noise.
Use the contrast ratio to screen options, then choose the color that fits the real component, content, and brand context. Some fixed mid-luminance colors cannot reach AAA with only the opposite color changed.
Accessibility caveats
Contrast is necessary for readable color pairs, but it is not the whole accessibility story. Text size, font weight, component shape, focus behavior, spacing, motion, and non-color cues all matter.
Do not use color alone to communicate errors, success, required fields, selected states, chart categories, or destructive actions. Pair color with labels, icons, patterns, position, or other cues.
A passing contrast ratio means the color pair clears a threshold. It does not guarantee that the whole design is accessible.
Quick answers
Contrast FAQ
What is the Hue Codex contrast checker?
The Hue Codex contrast checker is a free online tool that compares foreground and background colors, calculates the contrast ratio, and reports WCAG-style pass or fail results for normal text, large text, and UI components.
What contrast ratio do I need for WCAG AA normal text?
Normal text needs a contrast ratio of at least 4.5:1 for WCAG AA.
What contrast ratio do I need for WCAG AAA normal text?
Normal text needs a contrast ratio of at least 7:1 for WCAG AAA.
What contrast ratio do I need for large text?
Large text needs at least 3:1 for AA and 4.5:1 for AAA.
What contrast ratio do UI components need?
Meaningful UI components and non-text graphical objects commonly use a 3:1 contrast target against adjacent colors.
Can I swap foreground and background colors?
Yes. The swap control reverses the foreground and background values so you can quickly test the pair in the opposite direction.
Can the checker suggest a color for my contrast target?
Yes, when one side can be adjusted enough against the fixed color. Choose the target first, then use the adjust controls to tune text or background toward the lowest contrast ratio that passes that selected target.
What do the lightness sliders change?
The lightness sliders adjust the HSL lightness of the text or background color while preserving its current hue and saturation as much as the browser color model allows.
Does the checker suggest readable text colors?
Yes. Hue Codex ranks readable text color candidates against the selected background and shows their contrast ratios and best-use labels.
Does passing contrast mean my design is fully accessible?
No. Passing contrast is important, but accessibility also depends on text size, layout, focus behavior, labels, non-color cues, and how the color pair is used in context.