Color Contrast Ratio Calculator
FreeCalculate the exact contrast ratio between any two colors. Instant WCAG AA and AAA results. Free, browser-based, no signup.
What's next
Settings guide
Interpreting contrast ratios:
| Ratio | Interpretation |
|---|---|
| 1:1 | No contrast (identical colors) |
| 2:1 | Very low — text essentially invisible |
| 3:1 | Minimum for large text or UI components (WCAG AA) |
| 4.5:1 | Minimum for normal body text (WCAG AA) |
| 7:1 | Enhanced — WCAG AAA for body text |
| 21:1 | Maximum — black text on white background |
Colors that commonly fail 4.5:1 on white (#FFFFFF):
- ·Medium gray #808080 → 3.95:1 (Fail)
- ·Brand red #FF0000 → 4.0:1 (Fail — surprising)
- ·Pure green #00FF00 → 1.37:1 (Fail dramatically)
- ·Medium blue #0000FF → 8.59:1 (Pass — blue on white works)
- ·Medium orange #FF8800 → 2.94:1 (Fail)
Testing both directions: Always test foreground-on-background AND background-on-foreground for interactive elements that can be in different states.
Format comparison
Contrast ratio vs luminance difference: The luminance formula is not the same as the simple mathematical difference between color values. RGB(128,128,128) gray has a relative luminance of 0.216, not 0.5. The eye perceives mid-gray as much darker than the mathematical midpoint because human brightness perception is non-linear (gamma-encoded).
WCAG 2.1 ratio vs APCA score: WCAG 3.0 will use the APCA (Advanced Perceptual Contrast Algorithm) which produces an Lc (Lightness Contrast) score instead of a ratio. APCA accounts for font size and weight — small text requires higher contrast than large text. WCAG 2.1 applies the same threshold regardless of font size above/below the 18/14px line. Until WCAG 3.0 is finalized, the 4.5:1 ratio remains the legal standard.
Contrast for dark themes: The same ratio thresholds apply. A dark theme with light text still needs 4.5:1 for body text. Light text (say, #E5E7EB) on a dark background (#1F2937) achieves approximately 13:1 — well above AAA. Problems arise when designers use muted colors for secondary text on dark backgrounds, dropping below 4.5:1.
How it works
Enter two colors
Input any color in HEX, RGB, or HSL format for both foreground and background.
Calculate
The relative luminance of each color is computed using the WCAG sRGB formula, then the ratio is derived.
Read and act
See the exact ratio and pass/fail status for AA and AAA. Adjust colors until you reach compliance.
About this format
The contrast ratio between two colors is a precise mathematical measure of how visually distinct they are from each other. It is the single most important accessibility metric for digital color — the number that determines whether text is readable, whether buttons are visible, and whether your interface meets legal accessibility standards.
The ratio runs from 1:1 (identical colors — zero contrast) to 21:1 (black on white — maximum possible contrast). WCAG 2.1 requires at least 4.5:1 for standard body text against its background, and 3:1 for large text or UI component boundaries. AAA compliance requires 7:1 for body text.
The formula uses relative luminance — a linear measure of how much light each color emits or reflects, accounting for how the human eye's sensitivity varies across the spectrum (we perceive green as brighter than blue at the same intensity). The luminance of both colors is calculated, and the ratio is (brighter + 0.05) / (darker + 0.05).