User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

Foreground (Text)

Background

Presets:

— Contrast Ratio

AA Normal ≥ 4.5:1 —

AA Large ≥ 3:1 —

AAA Normal ≥ 7:1 —

AAA Large ≥ 4.5:1 —

Normal text sample — The quick brown fox jumps over the lazy dog. Large text sample ⬤ UI Component

FG Luminance —

BG Luminance —

FG HSL —

BG HSL —

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Incorrect color contrast is the single most common accessibility violation on the web. The Web Content Accessibility Guidelines (WCAG 2.1) define precise thresholds: a contrast ratio of at least 4.5:1 for normal text (Level AA) and 7:1 for enhanced readability (Level AAA). Failing these thresholds means your content is illegible to roughly 300 million people with color vision deficiencies. This tool computes the relative luminance L of both your foreground and background colors using the sRGB linearization model specified in WCAG 2.1 §1.4.3, then derives the contrast ratio CR. It does not approximate. It uses the exact gamma-corrected formula mandated by the standard.

Note: this tool assumes opaque colors. If your foreground uses alpha transparency, the effective contrast depends on the composite result against the actual background, which varies by rendering context. Pro Tip: large text is defined as 18pt regular or 14pt bold. Misidentifying your text size leads to false compliance.

Formulas

The contrast ratio between two colors is derived from their relative luminance values. First, each sRGB channel is linearized:

C_lin =

{

C_sRGB12.92 if C_sRGB ≤ 0.04045(C_sRGB + 0.0551.055)^2.4 otherwise

where C_sRGB is the channel value divided by 255. Relative luminance is then:

L = 0.2126 ⋅ R_lin + 0.7152 ⋅ G_lin + 0.0722 ⋅ B_lin

The contrast ratio between two luminances L₁ (lighter) and L₂ (darker) is:

CR = L₁ + 0.05L₂ + 0.05

Where L₁ ≥ L₂. The result ranges from 1:1 (identical colors) to 21:1 (black on white). R_lin, G_lin, B_lin are the linearized red, green, and blue channel values respectively. CR is the contrast ratio. The coefficients 0.2126, 0.7152, 0.0722 reflect human photopic sensitivity per ITU-R BT.709.

Reference Data

WCAG Level	Text Size	Min. Contrast Ratio	Use Case
AA	Normal (< 18pt)	4.5:1	Body text, labels, form fields
AA	Large (≥ 18pt or 14pt bold)	3:1	Headings, large UI elements
AAA	Normal (< 18pt)	7:1	Long-form reading, legal text
AAA	Large (≥ 18pt or 14pt bold)	4.5:1	Critical navigation, alerts
AA	UI Components & Graphics	3:1	Icons, borders, focus indicators
Non-text	Incidental / Decorative	No requirement	Disabled controls, logos
Reference	Black on White	21:1	Maximum possible contrast
Reference	White on White	1:1	Minimum possible (invisible)
Common Fail	Light gray (#999) on white	2.85:1	Placeholder text (fails AA)
Common Fail	Red (#FF0000) on black	5.25:1	Error states (passes AA)
Common Fail	Yellow (#FFFF00) on white	1.07:1	Highlight text (fails all)
Guideline	WCAG 2.1 §1.4.3	Level AA	Minimum conformance for text
Guideline	WCAG 2.1 §1.4.6	Level AAA	Enhanced conformance for text
Guideline	WCAG 2.1 §1.4.11	Level AA	Non-text contrast (UI, graphics)
Standard	Section 508 (US)	Maps to WCAG AA	US federal accessibility law
Standard	EN 301 549 (EU)	Maps to WCAG AA	European accessibility standard

Frequently Asked Questions

Large text (≥ 18pt regular or ≥ 14pt bold) has a lower contrast threshold of 3:1 for AA compliance, while normal text requires 4.5:1. Larger glyphs have thicker strokes that remain legible at lower contrast. If your ratio falls between 3:1 and 4.5:1, it passes only for large text. Increase the lightness difference between your foreground and background to reach the 4.5:1 threshold for body copy.

This tool assumes fully opaque colors. When a foreground color has alpha transparency (e.g., rgba(0,0,0,0.5)), the effective rendered color is a composite of the foreground and whatever lies beneath it. The actual contrast depends on the composited result, not the raw RGBA value. To check transparent colors accurately, first composite them against the known background using the formula: C_out = C_fg × α + C_bg × (1 − α), then input the resulting opaque color.

Not entirely. WCAG contrast ratios are based on luminance perception, which is preserved in most forms of color blindness (protanopia, deuteranopia, tritanopia). However, relying solely on color to convey information (e.g., red vs. green for error/success) violates WCAG 1.4.1 regardless of contrast ratio. A color pair can pass 4.5:1 contrast and still be indistinguishable to a dichromat if both colors share similar luminance. Always use additional cues: icons, patterns, or text labels.

WCAG 2.1 uses a simple luminance ratio that treats foreground and background symmetrically. The Advanced Perceptual Contrast Algorithm (APCA), proposed for WCAG 3.0, accounts for polarity (dark-on-light vs. light-on-dark perceive differently), font weight, and spatial frequency. APCA reports a signed Lc value rather than a ratio. As of 2024, WCAG 2.1 AA remains the legal standard referenced by Section 508 and EN 301 549. This tool implements the WCAG 2.1 algorithm.

Human vision derives approximately 71.52% of perceived brightness from the green channel, 21.26% from red, and only 7.22% from blue (ITU-R BT.709 coefficients). Pure red (#FF0000) has zero green and blue components, so its relative luminance is only about 0.2126. Black has luminance 0. The ratio computes to (0.2126 + 0.05) / (0 + 0.05) ≈ 5.25:1. This passes AA for normal text but fails AAA. Pure green (#00FF00) by contrast achieves approximately 15.3:1 against black.

Adjust the lightness component while keeping hue and saturation constant. Convert your color to HSL. For a dark background, increase the foreground lightness. For a light background, decrease it. Small lightness shifts of 10-15% often bridge the gap from 3:1 to 4.5:1 without perceptible brand deviation. This tool provides automatic suggestions that darken or lighten your colors to the nearest passing threshold.