Compute WCAG color contrast ratio

It returns each color’s luminance, the resulting contrast ratio, and clear AA and AAA pass indicators for normal and large text. Use it to review design tokens, validate interface colors before release, or add a repeatable accessibility check to an automated workflow. Inputs are explicit hexadecimal colors, calculations are deterministic, and invalid formats produce a useful validation error instead of an uncertain result. The browser tool is convenient for individual checks, while each API request costs $0.002 when you need the same calculation in code.

Understand the values returned by the calculator

The result starts by normalizing both inputs to six-digit lowercase hexadecimal colors, so shorthand such as #fff is reported consistently as #ffffff. It then gives relative luminance for the foreground and background. Relative luminance is a value from zero for black to one for white, derived from linearized sRGB channels and weighted to reflect the eye’s different sensitivity to red, green, and blue light. The contrast ratio compares the lighter luminance with the darker luminance and ranges from 1:1 for identical colors to 21:1 for black and white. The displayed ratio is rounded to two decimal places, while every pass decision uses the full unrounded value. That distinction matters near a threshold: a value that merely displays as 4.50 must not pass if its actual value remains below 4.5. The response groups four booleans under normal text and large text, making it straightforward to show a result to a designer or assert a policy in a test suite without interpreting prose.

Provide valid colors and interpret AA and AAA

Enter foreground and background as three-digit or six-digit hexadecimal colors, with or without the leading hash. Values such as #123, 123, #112233, and AABBCC are accepted and normalized. CSS color names, rgb() expressions, hsl() expressions, alpha-bearing four-digit or eight-digit hex values, empty strings, and non-string values are rejected because opacity and compositing would require additional context. For normal text, WCAG AA requires a contrast ratio of at least 4.5:1 and AAA requires at least 7:1. For large text, AA requires at least 3:1 and AAA requires at least 4.5:1. Large text generally refers to text at least 18 point regular or 14 point bold, but this capability does not inspect typography; it reports both matrices so your application can choose the relevant one. A passing number is one part of an accessibility review, not proof that an entire interface is accessible. Font weight, size, state changes, images, gradients, transparency, and user interaction still need appropriate testing.

Use contrast results in design and delivery workflows

Start with the actual foreground and background tokens used by a component rather than colors sampled from a compressed screenshot. For a manual review, compare body text, secondary text, links, button labels, form hints, focus indicators, and disabled states against every surface on which they appear. In a design system, build a small matrix of approved token pairs and call the API whenever a palette changes. A continuous integration check can reject a proposed body-text pair when normal-text AA is false, while allowing a decorative or large-display combination under a separately documented rule. Store the normalized colors and ratio with the test output so reviewers can reproduce the finding. Each automated request costs $0.002; invalid input returns an error rather than a misleading pass. The algorithm uses no network access, randomness, or current time, so the same pair always produces the same result. If the design includes transparency, a gradient, a photograph, or colors that change on hover, first determine the effective rendered colors or use a browser-based accessibility audit that can inspect the complete page context.