How is the WCAG contrast ratio calculated?

It is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colours. Relative luminance gamma-expands each sRGB channel and weights them 0.2126 red, 0.7152 green, 0.0722 blue, per WCAG 2.1.

What ratio do I need to pass?

AA requires 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular and above). AAA requires 7:1 for normal and 4.5:1 for large text. Non-text UI components need 3:1 under criterion 1.4.11.

Why test both themes at once?

A colour that passes in light mode can fail in dark mode because relative luminance is not symmetric. Testing both pairs together stops one theme from silently regressing accessibility when you only checked the other.

Does contrast ratio depend on which colour is foreground?

No. The ratio is the same whether a colour is text or background, because the formula always divides the lighter luminance by the darker. The tool still labels foreground and background to mirror how you use them.

Is anything sent to a server?

No. All luminance and ratio maths run in your browser using the exact WCAG formula. Your colours never leave your device.

Dark Mode Contrast Tester

The Dark Mode Contrast Tester evaluates a light-theme colour pair and a dark-theme colour pair at the same time, computing the WCAG 2.1 contrast ratio for each and showing AA and AAA pass/fail side by side. Dual-theme design systems are easy to regress: a text colour that reads comfortably in light mode can drop below the threshold once inverted for dark mode. Checking both pairs together catches that before it ships.

How it works

The tool uses the exact WCAG 2.1 relative-luminance and contrast formulas.

Relative luminance. Each sRGB channel is divided by 255 and gamma-expanded (c/12.92 below 0.03928, otherwise ((c+0.055)/1.055)^2.4), then combined as 0.2126·R + 0.7152·G + 0.0722·B.
Contrast ratio. For a pair it computes (Llighter + 0.05) / (Ldarker + 0.05), giving a value between 1:1 (identical) and 21:1 (black on white).
Thresholds. Each theme is checked against the WCAG levels:

Text size	AA	AAA
Normal	4.5:1	7:1
Large (>=18.66px bold / 24px)	3:1	4.5:1

Both themes are reported together so a fail in either stands out immediately.

Tips and notes

If a theme fails, the fastest fix is to push the foreground and background further apart in lightness while keeping the hue — small lightness changes move the ratio a lot.
Large text gets a lower bar (3:1 for AA), so headings can use colours that body text cannot.
Remember criterion 1.4.11: icons, borders, and form-field outlines need at least 3:1 against their background in both themes, not just text.