Enter 3 or 6 digit hex colors (for example #2563eb or #25e). The check uses the WCAG 2.1 relative-luminance formula.
Calculation details
Planning estimate only, not financial, tax, or legal advice. Verify assumptions and current rules before making decisions.
This tool runs in your browser. Your calculator inputs and results are never transmitted to us or to ad/affiliate partners. Ads and sponsored links may set third-party cookies to serve and measure them, but they never receive your calculation values. If you explicitly save a scenario, its permitted fields stay in local browser storage until you clear them. See our Privacy Policy.
Use this result
Share the current inputs or ask ChatGPT to explain the calculation in context.
What does this calculator estimate?
A contrast ratio calculator checks WCAG compliance for text and background colors. Enter two hex colors to see the ratio and pass/fail against AA/AAA.
- Ratio = (L1+0.05) ÷ (L2+0.05)
- AA: 4.5:1 normal text, 3:1 large
- AAA: 7:1 normal text
Why contrast matters
Contrast between text and background determines readability — poor contrast fails low-vision users and looks washed out. The WCAG guidelines set numeric thresholds: 4.5:1 for normal text (AA), 7:1 for AAA. The tool computes the exact ratio.
Limitations to watch for
The ratio is computed from luminance, not perceived brightness — it's the official standard but doesn't capture every visual condition. Large text (18pt+ or 14pt bold) needs only 3:1. Logos and decorative elements are exempt.
How to use it in practice
Enter your text and background colors to check compliance. Aim for AA at minimum on all text. Darken the text or lighten the background until the ratio passes.
['Enter the text color (hex).', 'Enter the background color (hex).', 'Read the ratio and the WCAG pass/fail.']
What contrast ratio measures
Contrast ratio compares the luminance of text and background: pure white on pure black is 21:1; typical gray-on-white is 4.5:1. The WCAG guidelines require 4.5:1 for normal text and 3:1 for large text and UI components. The calculator applies the standard formula.
The luminance math
Relative luminance converts each RGB channel to a linear value, then weights them: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05) with the lighter value on top. The calculator handles the math from hex colors.
Why 4.5:1 matters
The 4.5:1 threshold is the accessibility bar for normal text — below it, low-vision users and bright environments struggle. Meeting it is also a quality signal: gray-on-white 'designer' palettes often fail. The calculator flags pass/fail against WCAG AA.
A worked example
#333333 on #FFFFFF: contrast about 12.6:1 — passes AA and AAA. #999999 on #FFFFFF: about 2.8:1 — fails even large-text AA. The calculator returns the ratio and the verdict for normal, large, and UI text.
Testing real palettes
Run brand colors through the calculator before shipping: body text needs 4.5:1, large headings 3:1, and UI components 3:1. The calculator catches the subtle fails that visual review misses.
How this calculator works
Formula
WCAG contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is relative luminance: 0.2126R + 0.7152G + 0.0722B with linearized channels.
Worked example
White (#FFFFFF) on black (#000000) gives a 21:1 ratio — the maximum. Normal text needs ≥ 4.5:1 (WCAG AA).
Assumptions to verify
- Hex colors are entered correctly.
- The WCAG 2.x luminance formula applies.
- Text size determines the applicable threshold.
Frequently asked questions
What is a good contrast ratio?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 for normal text. White on black is 21:1.
How is it calculated?
Contrast = (L1 + 0.05) ÷ (L2 + 0.05) using relative luminance, where L = 0.2126R + 0.7152G + 0.0722B on linearized channels.
What colors pass?
Dark text on light backgrounds usually passes; gray-on-white and yellow-on-white often fail.
Does large text need less contrast?
Yes — 3:1 for large text (18pt+ or 14pt bold).
Is this a legal requirement?
WCAG compliance is required by law in many contexts (ADA, Section 508, EAA) and best practice everywhere.
Why is my ratio different from other tools?
Small rounding differences exist; all should use the same WCAG formula. Check the luminance computation.
What about logos?
Decorative and incidental text (logos, watermarks) is exempt from WCAG contrast requirements.
How is contrast ratio calculated?
Relative luminance of the lighter color ÷ the darker, using the WCAG formula.
What colors fail?
Light grays on white commonly fail — e.g., #999 on #FFF is about 2.8:1.
What does 21:1 mean?
Pure black on pure white — the maximum possible contrast.
Cite this tool
BoringToolsKit. “Contrast Ratio Calculator (WCAG).” boringtoolskit.com/contrast-ratio-calculator/ (reviewed 2026-08-25). Free to reference in articles, syllabi, and answer posts with a link.
Privacy: Inputs and results stay in this browser. Any future sponsored recommendation or advertisement will be clearly labeled and kept separate from the calculation.