Loading...
Check text and background colors for accessibility compliance
WCAG contrast ratio measures the relative luminance difference between foreground and background colors to ensure text readability for people with low vision or color blindness.
Text Sizes
Large Heading (24px)
Body text at normal size (16px)
Small text for captions (14px)
Icons (UI Components ≥ 3:1)
Buttons
Contrast Ratio
16.1:1
≥ 4.5:1
≥ 3:1
≥ 7:1
≥ 4.5:1
| Level | Normal Text | Large Text |
|---|---|---|
| AA (Minimum) | 4.5:1 | 3:1 |
| AAA (Enhanced) | 7:1 | 4.5:1 |
The contrast ratio is calculated using the relative luminance of each color.
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance
and L2 is the darker color's luminanceFormula
L = 0.2126R + 0.7152G + 0.0722B | Contrast = (L1 + 0.05) / (L2 + 0.05)L = Relative luminance — linearized weighted sum of RGB channels
R, G, B = Linearized channel values: c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4
L1 = Luminance of the lighter color
L2 = Luminance of the darker color
Worked Example
Black (#000000) on White (#FFFFFF)
Did you know? The 0.05 offset in the contrast formula prevents division by zero for pure black and also models the ambient light reflectance of a typical display screen.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.