Contrast Ratio Calculator - WCAG 2 AA and AAA Color Checker

A contrast ratio calculator answers the one accessibility question that matters before any text or icon ships: do these two colors meet the WCAG 2 contrast thresholds for the people who will read them? Enter a foreground hex color and a background hex color, and the contrast ratio calculator returns the contrast ratio, the relative luminance of both colors, and a pass/fail badge for AA normal text at 4.5:1, AA large text at 3:1, AAA normal text at 7:1, and AAA large text at 4.5:1.

• • Audit body text on a marketing page: Score headline, body, link, and button colors against the 4.5:1 AA threshold.
• • Validate form fields and placeholders: Check borders, labels, helper text, and field background to catch low-contrast forms.
• • Compare dark mode and light mode pairs: Run brand colors through both backgrounds to confirm both clear the WCAG AA grid.
• • Check icon and UI component contrast: Score icons, focus rings, and disabled states against the 3:1 non-text threshold.

The contrast ratio is a single number that captures how different two colors look on a backlit screen, so the calculator gives a quick yes/no on whether a color pair is safe to ship. The 0.05 offset models ambient screen flare and yields a 21:1 upper bound for pure black on pure white.

Treat the contrast ratio calculator as the planning step before a design token lands in code. When a pair is borderline, sample the colors on a real display at the intended font size before committing.

If a brand color is defined as rgb() instead of hex, the same channel math feeds the RGB to Hex calculator so the pair can be reused across CSS and design tokens.

The contrast ratio calculator is built in three steps: parse each hex into sRGB channels, run those channels through the inverse sRGB companding curve, then combine the linear channels into a single relative luminance and feed both luminances into the contrast formula.

• Foreground (hex): Hex value for the text or icon, with or without the leading #.
• Background (hex): Hex value for the surface behind the foreground.
• Large text toggle: Switches the AA pass threshold from 4.5:1 to 3:1 for 18pt regular or 14pt bold text.
• Relative luminance (L): Perceived brightness of each color after sRGB inverse companding, on a [0, 1] scale.
• Contrast ratio: (L1 + 0.05) / (L2 + 0.05) with L1 as the higher luminance, returned to two decimals.

Hex shorthand like #09c expands to #0099cc before the math runs, matching CSS behavior. Lowercase and uppercase hex digits normalize to the same value, and the large text toggle only changes which AA badge is highlighted, not the ratio itself.

According to WCAG 2.2, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), with L1 as the higher luminance.

According to WCAG 2.2, relative luminance comes from sRGB channels normalized to [0, 1], run through the inverse companding curve at the 0.04045 breakpoint, and combined with the weights 0.2126, 0.7152, and 0.0722.

When the hex shorthand needs to be expanded into channels by hand, the Hex to RGB calculator shows the same expansion step the contrast calculator runs internally.

Four ideas drive every contrast decision and the pass/fail badges.

Relative luminance is not the same as lightness in HSL or CIELAB. It is the linearized light output of a display, so saturated colors with the same HSL lightness can still land on different contrast ratios. Large text relaxes the AA rule because larger letterforms are easier to read at lower contrast; WCAG defines large text as 18 point regular or 14 point bold, which a 16px body font is not.

When the sRGB weight on the green channel feels unintuitive, the Color Converter exposes the same RGB channels as HSL and HSV so the eye can compare the two models.

Six steps take you from two hex values to a WCAG 2 pass/fail decision.

1. 1 Paste the foreground hex color: Type the hex value for the text or icon. The leading # is optional and 3-digit shorthand like #09c is accepted.
2. 2 Paste the background hex color: Type the hex value for the surface behind the text. Use the same shorthand rules as the foreground.
3. 3 Pick normal text or large text: Set the large text toggle to Yes for 18pt regular or 14pt bold text, where the AA threshold drops from 4.5:1 to 3:1.
4. 4 Read the contrast ratio: Use the contrast ratio to compare the pair against the WCAG 2 grid. A ratio of 4.50 or higher passes AA for normal text.
5. 5 Check the AA and AAA badges: Each threshold gets its own pass/fail badge so the relevant decision for your text size is obvious at a glance.
6. 6 Swap and recheck: Swap the two hex values to confirm the ratio is symmetric. If a pair is borderline, sample the colors on a real display before committing.

Check the body text on a marketing page: paste the text hex (#1f2937) and the page background (#ffffff), leave large text on No, and read the contrast ratio of 14.68. Every WCAG 2 threshold passes, so the copy is safe to ship.

Once the colors are locked, the Pixel to Em/Rem converter picks the matching rem and em sizes so the body copy sits inside the WCAG large-text threshold without a redesign.

Six practical wins show up the first time a color pair goes through the calculator instead of the eyeball.

• • Catch low-contrast copy before it ships: Score the actual text and background hex values, so a failing pair never reaches staging.
• • Audit a whole design system in minutes: Loop through the design tokens once and record the pass/fail badge next to each.
• • Resolve design disagreements with one number: Replace 'this feels too low contrast' with a clear AA or AAA decision.
• • Stay current with the WCAG 2 standard: The thresholds and formulas come straight from the WCAG 2.2 definition.
• • Cover both modes in one pass: Run the same brand colors against light and dark backgrounds before branching the design system.
• • Document accessibility decisions in the ticket: Paste the ratio and the pass/fail into the design review for an audit trail.

When the audit has to extend across the actual hardware readers use, the Screen Resolution calculator turns panel size and resolution into PPI so each pair can be sampled at the real pixel density of the device.

Five factors shift the ratio and pass/fail badges in real designs.

• • The WCAG 2 contrast formula was designed for solid text on a solid background and does not cover gradient text, drop shadows, or outline text.
• • Translucent or anti-aliased text mixes with the surface behind it, so the contrast ratio is the upper bound at full opacity.
• • The 0.05 ambient flare offset was tuned for backlit displays and may understate contrast on paper or e-ink.

Treat the contrast ratio as the lowest acceptable score for a color pair. Anything borderline should be sampled on a real display at the intended size before the design is locked. For non-text content like icons and form borders the 3:1 threshold is the relevant pass value.

According to WebAIM, color contrast is one of the most reliable accessibility improvements because every visitor benefits, including the roughly 8 percent of men and 0.5 percent of women with color vision deficiency.

When the audit also has to plan the room lighting around the screen, the Lighting calculator turns square footage and a recommended lux into total lumens so the ambient level stays inside the calibration envelope.