Contrast Checker
Check text color contrast against WCAG AA/AAA standards. Enter foreground and background colors to get the ratio instantly.
Your result will appear here.
Contrast Checker online
Enter a foreground (text) color and a background color to instantly see the contrast ratio and whether it meets WCAG 2.1 AA/AAA for normal text (4.5:1 / 7:1) and large text (3:1 / 4.5:1). Colors can be entered as HEX, RGB, or picked from the color picker.
How it works
The tool computes the relative luminance of each color using the sRGB formula with gamma correction, then calculates the contrast ratio:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B (after gamma expansion)
Contrast = (L_lighter + 0.05) / (L_darker + 0.05)
The ratio is compared against WCAG 2.1 thresholds:
- AA normal text: ≥ 4.5:1
- AA large text (18pt+ / 14pt bold): ≥ 3:1
- AAA normal text: ≥ 7:1
- AAA large text: ≥ 4.5:1
A live text preview shows your chosen colors at both normal and large sizes.
Worked example
Foreground #1A1A1A (near-black) on background #FFFFFF (white): L₁ ≈ 0.0103, L₂ = 1.0 → ratio = (1.0 + 0.05) / (0.0103 + 0.05) ≈ 17.4:1. Passes AAA for both normal and large text.
Foreground #767676 (medium gray) on #FFFFFF: ratio ≈ 4.54:1 — just passes AA for normal text, fails AAA.
Practical tips
- Aim for at least AA (4.5:1 normal / 3:1 large) for all body text.
- Use the large text threshold (3:1) for headings ≥ 18 pt or bold ≥ 14 pt.
- Slight adjustments to hue/saturation often fix a failing ratio without changing the design intent.
- Test both light-on-dark and dark-on-light — symmetry is not guaranteed.
Privacy and browser processing
Whenever practical, DailyWebKit processes input locally in your browser. Tools that need network data can depend on external services, browser permissions and CORS. Do not enter confidential information into a third-party network service.
Frequently asked questions
What is the difference between AA and AAA?
AA is the minimum legal requirement in many jurisdictions; AAA is the enhanced (stricter) level for optimal accessibility. AA requires 4.5:1 for normal text; AAA requires 7:1.
What counts as "large text"?
Text ≥ 18 pt (24 px) or bold text ≥ 14 pt (18.5 px). Large text has a lower threshold (3:1 for AA, 4.5:1 for AAA).
Why do I need gamma correction?
sRGB colors are gamma-encoded. Luminance must be calculated in linear space — the tool expands each channel (c/255) with the standard sRGB inverse gamma (c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4) before applying the luminance weights.
Can I use this for non-text elements (icons, borders)?
WCAG also defines non-text contrast (3:1 for UI components and graphical objects). The same ratio applies — just test your icon color against its background.
Is this tool free?
Yes. It is free and does not require an account.
Does DailyWebKit upload my input?
No. It runs locally in your browser and your input is never uploaded.