Question 1

What is the WCAG contrast ratio?

Accepted Answer

WCAG (Web Content Accessibility Guidelines) defines contrast ratio as the difference in relative luminance between two colors, on a scale from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast). It is calculated using the WCAG 2.x relative luminance formula, which applies a gamma correction to each RGB channel before computing the ratio.

Question 2

What ratios do I need to pass AA and AAA?

Accepted Answer

WCAG 2.x AA requires a contrast ratio of at least 4.5:1 for normal-weight text at typical body sizes, and 3:1 for large text (defined as 18pt or 14pt bold). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements (like the EU Web Accessibility Directive and US Section 508) mandate AA compliance at minimum.

Question 3

What color formats does this accept?

Accepted Answer

You can enter a six-digit hex code (#RRGGBB), a three-digit shorthand hex (#RGB), an rgb() or rgba() CSS value, or any of about 25 common CSS named colors like "red", "coral", or "teal". HSL input is not yet supported — convert your HSL values to hex first using any CSS reference.

Question 4

Does contrast ratio apply to icons and UI elements too?

Accepted Answer

WCAG 1.4.11 (Non-text Contrast) requires at minimum a 3:1 contrast ratio for user interface components (buttons, inputs, focus indicators) and meaningful graphics against their adjacent background. This tool calculates the same ratio formula — just check that the relevant foreground and background colors meet 3:1.

Question 5

Can I check background-on-background contrast?

Accepted Answer

Yes — enter any two colors and the tool measures the ratio between them, regardless of whether one is "text". This makes it useful for checking border contrast against a background, icon fill against a button surface, or any two adjacent colors in a design.

Level	Text type	Min. ratio	Typical use
AA	Normal text	4.5 : 1	Body copy, labels, links
AA	Large text (18pt+ or 14pt+ bold)	3.0 : 1	Headings
AA	UI components & graphics	3.0 : 1	Buttons, inputs, icons
AAA	Normal text	7.0 : 1	High-accessibility contexts
AAA	Large text	4.5 : 1	Enhanced heading contrast

Color Converter & WCAG Contrast Checker

WCAG contrast thresholds

Common questions