Last updated
WCAG Contrast Thresholds Reference
- Normal text (under 18pt / 14pt bold): 4.5:1 for AA, 7:1 for AAA
- Large text (18pt+ / 14pt bold+): 3:1 for AA, 4.5:1 for AAA
- Non-text UI components and graphics: 3:1 for AA
- Decorative elements with no informational value: no requirement
- Disabled UI components: no requirement
- Logotypes and brand marks: no requirement
The Color Contrast Ratio Calculator on TechConverter.me gives you the exact ratio, the full luminance breakdown, and WCAG compliance results for every level. Use it to document your design system, prepare accessibility audit reports, and make precise color adjustments that bring your designs into compliance.
Examples
Example 1: Understanding the Luminance Formula
To understand what the calculator does, consider a simple example: black text on a white background.
Color 1: #000000 (black)
R: 0, G: 0, B: 0
Relative luminance: 0.0
Color 2: #FFFFFF (white)
R: 255, G: 255, B: 255
Relative luminance: 1.0
Contrast ratio: (1.0 + 0.05) / (0.0 + 0.05) = 21:1
This is the maximum possible contrast ratio. The 0.05 offset in the formula accounts for ambient light reflected by a typical display. Every other color combination falls somewhere between 1:1 (identical colors) and 21:1.
Example 2: Calculating Luminance for a Mid-Tone Color
Here is how the calculator processes a medium blue color to determine its relative luminance:
Color: #4A90D9
R: 74 → normalized: 0.290 → linearized: 0.0682
G: 144 → normalized: 0.565 → linearized: 0.2780
B: 217 → normalized: 0.851 → linearized: 0.6038
Luminance = (0.2126 × 0.0682) + (0.7152 × 0.2780) + (0.0722 × 0.6038)
= 0.0145 + 0.1989 + 0.0436
= 0.2570
The green channel contributes the most to luminance (weight 0.7152) because the human eye is most sensitive to green light. Blue contributes the least (weight 0.0722). This is why two colors can look equally bright to the eye but have very different luminance values depending on their hue.
Example 3: Documenting Contrast Ratios for an Accessibility Audit
An accessibility auditor is reviewing a web application and needs to document the contrast ratios for all text elements. They use the calculator to produce a compliance table:
- Body text
#333333on#FFFFFF: 12.63:1 — AA Pass, AAA Pass - Secondary text
#666666on#FFFFFF: 5.74:1 — AA Pass, AAA Fail - Caption text
#999999on#FFFFFF: 2.85:1 — AA Fail, AAA Fail - Link color
#0066CCon#FFFFFF: 5.74:1 — AA Pass, AAA Fail - Error text
#CC0000on#FFFFFF: 5.92:1 — AA Pass, AAA Fail
The audit reveals that caption text fails AA compliance. The auditor recommends changing the caption color to #767676 (ratio 4.54:1) as the minimum fix, or #595959 (ratio 7.0:1) for AAA compliance.