What WCAG actually requires
WCAG 2.1 success criterion 1.4.3 sets minimum contrast between text and its background: 4.5:1 for normal text (AA), 3:1 for large text (18.66px bold or 24px regular and up), and 7:1 for AAA. Criterion 1.4.11 extends 3:1 to UI components and graphical objects.
How the ratio is calculated
Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L is relative luminance computed with the sRGB coefficients 0.2126 R + 0.7152 G + 0.0722 B after linearising each channel. The maximum is 21:1 for black on white; the minimum is 1:1 for identical colours.
Fixing a failing pair
- Darken the text rather than lightening the background — it usually preserves brand colour
- Increase weight or size to qualify for the large-text threshold
- Add a solid background behind text placed on images
- Never rely on colour alone to convey meaning (criterion 1.4.1)
Beyond text
Icons, focus rings, chart lines and form borders all need 3:1 against their adjacent colours. Placeholder text is text and needs 4.5:1. Disabled controls are exempt from 1.4.3 but should still be legible.
Frequently Asked Questions
What ratio should I target?
4.5:1 for body text, 3:1 for large text and UI components. AAA at 7:1 is worth aiming for on long-form content.
Why does my ratio differ from another tool?
Most differences come from rounding or from using the older WCAG 1.0 luminance formula. This tool follows WCAG 2.1 exactly.
Does contrast apply to dark mode?
Yes — the same thresholds apply to any colour pair, light or dark.
Privacy & Your Data
CSSmith runs entirely in your browser. Whatever you type, paste or upload is processed on your own device and never sent to a server — there is no backend to store it.