01
Start with the visible layers
Enter 3- or 6-digit HEX colors. Use the separate opacity control for the foreground; an 8-digit HEX is deliberately rejected rather than silently dropping its alpha.
Color & Accessibility
color contrast checkerfor readable text
Enter two HEX colors, set the text size and opacity, then inspect the exact ratio and five WCAG thresholds.
color contrast checker
Sample text
Contrast ratio
4.48:1
Selected text result: Fail · AA · Needs 4.5:1
Normal text condition · Rendered foreground: #777777
Normal text AA · 4.5:1Fail
Normal text AAA · 7:1Fail
Large text AA · 3:1Pass
Large text AAA · 4.5:1Fail
UI/graphics AA · 3:1Pass
Color preview
The quick brown fox jumps over the lazy dog.
Suggested passing colors
Adjust foreground
#767676 · 4.54:1
Adjust background
#060606 · 4.52:1
Calculated locally in your browser. Color values are not uploaded.
Text conditions
Result is current.
A design token can look fine on a mockup yet miss normal-text AA by a fraction. This color contrast checker tests the actual foreground over its background before you ship the color pair.
Use the color contrast checker when reviewing small labels, large headings, or UI graphics. Its contrast ratio calculator accounts for foreground alpha rather than treating a translucent color as opaque.
Why use this color contrast checker
The result follows the colors your users actually see, then shows a practical adjustment.
Measure the rendered color, not the raw HEX
A translucent foreground is blended with the opaque background before WCAG luminance is calculated. The color contrast checker shows that composite HEX beside the ratio, so a 50% opacity label cannot appear safer than it is.
Preview both paths to a passing pair
When a color misses the chosen text threshold, see a proposed foreground change and a separate background change. Each candidate shows its own ratio; neither replaces a brand color until you apply it.
Three decisions behind a trustworthy verdict
A ratio has meaning only when the rendered layer and text condition match the design.
02
Match the real text
Set the CSS pixel size and bold state. The checker treats text as large only from 24px regular or 18.67px bold; auto-check refreshes after a short pause, or you can switch to manual checking.
03
Read the unrounded verdict
The displayed ratio has two decimals, but pass/fail uses the full value. Review the five thresholds, then copy a current result or preview one suggested color before applying it.
What the live result measures
Separate the mathematical ratio from the particular WCAG condition you are testing.
Foreground alpha composition
Opacity from 0 to 100 percent is applied to the foreground on the chosen opaque background. The rendered HEX is visible so the calculation can be checked.
Text size and weight conditions
Normal and large text have different AA and AAA thresholds. A 20px regular label is still normal text, while bold text reaches the large-text threshold near 18.67px.
Five pass and fail checks
Normal-text AA/AAA, large-text AA/AAA, and meaningful UI graphics AA are shown together. Choosing a target changes the selected verdict and suggestions, not the underlying ratio.
Two reversible color suggestions
Try a lighter or darker foreground or background along the current hue and saturation. A candidate is previewed first; apply and undo affect one color field at a time.
Where this color-pair result stops
These boundaries prevent a single number from being mistaken for a page audit.
- Opaque background required
- Background alpha, gradients, and photos need another underlying color or pixel sampling. This calculator accepts one opaque background, then composites only the foreground alpha.
- HEX input has a narrow contract
- Type three or six hexadecimal digits, with or without #. CSS named colors, rgb(), hsl(), OKLCH, and 8-digit HEX belong in a color converter and are reported as invalid here.
- No whole-page accessibility claim
- A passing color pair does not inspect focus states, keyboard access, labels, or other page colors. Check those separately; this is not a site-wide WCAG certificate.
- WCAG 2.x ratio only
- APCA uses different math and thresholds. The AA/AAA labels here are WCAG 2.x checks, and no APCA score is mixed into them.
Color contrast checker questions
Short answers to the text, opacity, and accessibility questions people raise before publishing.
What is a good contrast ratio?
For normal text, AA needs at least 4.5:1 and AAA needs 7:1. The color contrast checker compares the full unrounded ratio, so a displayed 4.50:1 can still fail if the actual number is lower.
What is the minimum contrast for normal text?
Normal text needs 4.5:1 for AA. Large text has a lower AA threshold of 3:1; non-text controls and informative graphics commonly use 3:1 against adjacent colors.
What counts as large text under WCAG?
WCAG calls text large at 24 CSS pixels or at 14pt bold, about 18.67 CSS pixels. The font-size option chooses the applicable threshold without changing the color ratio.
How does transparency affect contrast?
The foreground is mixed with the opaque background channel by channel before luminance is measured. If opacity is zero, the text becomes the background color and the ratio is 1:1.
Does a passing color pair make a whole page accessible?
No. A passing pair addresses only that specific text and background condition. Semantic structure, keyboard operation, focus indicators, images, and every other color state still need review.
Found a color pair this checker misreads?
Run the color contrast checker
Keep this color contrast checker open while tuning a design system token or reviewing a form label.
Copy the current ratio and colors for a design review, or try a suggested pair without losing the original values.
A local WCAG 2.x color-pair calculation.