Explore our collection of 150+ developer tools, PDF editors, and image converters. Everything runs locally in your browser.
Ubify Media & Design Operations
UI/UX & DIGITAL MEDIA SPECIALISTS
About This Tool
This accessibility utility evaluates color contrast ratios between text (foreground) and background colors according to the W3C Web Content Accessibility Guidelines (WCAG) 2.1 specifications. It computes relative luminance using sRGB spectral coefficients and displays pass/fail status for Level AA and Level AAA thresholds.
### WCAG 2.1 Relative Luminance & Contrast Formula Relative luminance ($L$) calculates the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white:
1. **sRGB Linearization:** For each RGB color channel ($R, G, B$) normalized to $[0, 1]$: $C_{\text{linear}} = \begin{cases} C / 12.92 & \text{if } C \le 0.03928 \\ ((C + 0.055) / 1.055)^{2.4} & \text{otherwise} \end{cases}$ 2. **Relative Luminance Calculation:** $L = 0.2126 \times R_{\text{linear}} + 0.7152 \times G_{\text{linear}} + 0.0722 \times B_{\text{linear}}$ 3. **Contrast Ratio Formula:** $\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$ where $L_1$ is the relative luminance of the lighter color and $L_2$ is the relative luminance of the darker color.
### Compliance Thresholds - **WCAG Level AA:** Requires a minimum contrast ratio of $4.5:1$ for regular body text and $3.0:1$ for large text (at least $18\text{pt}$ or $14\text{pt}$ bold). - **WCAG Level AAA:** Requires a minimum contrast ratio of $7.0:1$ for regular body text and $4.5:1$ for large text.
### Worked Numeric Example Using the tool default values: Foreground White (`#ffffff`) and Background Blue (`#2563eb`): 1. Foreground Luminance ($L_1$): $1.000$ (pure white). 2. Background Luminance ($L_2$): For RGB values $(37, 99, 235)$, $L_2 \approx 0.133$. 3. Contrast Ratio: $(1.000 + 0.05) / (0.133 + 0.05) = 1.05 / 0.183 \approx 5.74:1$. 4. Evaluation: Passes Level AA for normal text ($5.74 \ge 4.5$), passes Level AA for large text ($5.74 \ge 3.0$), and passes Level AAA for large text ($5.74 \ge 4.5$), but fails Level AAA for normal text ($5.74 < 7.0$).
### Privacy and Client-Side Execution All sRGB color parsing, gamma curve linearizations, and luminance math operate locally in your browser memory. No color hex codes or inspection queries are sent to external servers.
How to Use
- 1
Select or type a foreground (text) hex color code (e.g. #ffffff).
- 2
Select or type a background hex color code (e.g. #2563eb).
- 3
Review the calculated contrast ratio displayed in the main score indicator.
- 4
Check the WCAG 2.1 AA and AAA compliance badges for normal and large text sizes.
- 5
Inspect the live rendered sample preview card to visually evaluate readability.
Frequently Asked Questions
What is the minimum contrast ratio required for WCAG 2.1 AA compliance?
WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for standard body text and 3:1 for large text (18pt or 14pt bold).
Why is 0.05 added to the luminance values in the formula?
The 0.05 offset accounts for ambient flare on display screens and prevents division by zero when calculating contrast against pitch black.
Are color values sent to an external API?
No. The relative luminance calculation runs entirely on your device using client-side JavaScript.