Accessibility tool

WCAG color contrast checker

Enter a foreground and background color to calculate the WCAG 2.2 contrast ratio, pass levels, preview text, and improvement suggestions.

Colors

Contrast ratio 0.00 :1
Readable sample text
AA normal—
AA large—
AAA normal—
AAA large—

Suggested adjustment

Enter valid colors to see a suggestion.

Small list checker

Add one color pair per line as foreground, background.

ForegroundBackgroundRatioAA normal

One-line tool description

Quick client-side tool to enter or pick foreground and background colors (HEX, RGB, CSS name), calculate WCAG 2.2 contrast ratio, show AA/AAA pass-fail for normal and large text, preview sample text, export results as JSON, and suggest slight color adjustments.

How to use

  1. Enter or pick a foreground and background color (HEX, #RGB/#RRGGBB, rgb()/rgba(), or CSS color name).
  2. (Optional) Set sample text, size and weight to preview; toggle alpha compositing if one color uses transparency.
  3. Read the contrast ratio, see AA/AAA pass/fail for normal & large text, copy the ratio or export a small JSON report, and view suggested color fixes.

How it works — formulas and constants (authoritative)

- sRGB → linear conversion (per-channel):
  - let c_srgb = channel / 255.
  - if c_srgb <= 0.03928 then c_lin = c_srgb / 12.92
  - else c_lin = ((c_srgb + 0.055) / 1.055) ^ 2.4
  (constants: 0.03928, divisor 12.92, offset 0.055, divisor 1.055, exponent 2.4).
- Relative luminance L (double precision):
  L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
  (coefficients: R=0.2126, G=0.7152, B=0.0722).
- Contrast ratio (L1 >= L2):
  CR = (L1 + 0.05) / (L2 + 0.05)
  - CR ranges >= 1.0 (black vs white ≈ 21.0).
- WCAG 2.2 text pass thresholds:
  - AA normal text: CR >= 4.5
  - AA large text: CR >= 3.0
  - AAA normal text: CR >= 7.0
  - AAA large text: CR >= 4.5
  - Large text definition: >=18pt (≈24px) or >=14pt (≈18.66px) bold. (Implementers commonly use 1pt = 1.333px; this tool shows the px mapping in the UI.)
- Handling alpha/transparency (recommended behavior):
  - If either color has alpha < 1, the tool composites foreground over background (source-over) per channel:
    out = fg * alpha_fg + bg * (1 - alpha_fg)
  - If background has alpha, it is composited over an implicit opaque page color (or over user-specified page color) before final luminance is computed.
- Input handling and precision:
  - Inputs out of range are clamped to [0,255] before conversion; non-parsable strings return a clear validation error.
  - Compute with double-precision floats; display the contrast ratio rounded to two decimal places (e.g., 7.15). Pass/fail decisions use the full-precision value.
- Example test vector (authoritative):
  - #000000 (L=0.0) vs #FFFFFF (L=1.0): CR = (1.0 + 0.05) / (0.0 + 0.05) = 21.0 — passes AA & AAA for normal and large text.

Outputs and suggested fixes

Displayed: contrast ratio (two-decimal), pass/fail for AA/AAA normal & large text, composited result color (if alpha used), and a sample text preview.

Suggestions: the tool generates small, perceptually-aware color adjustments (e.g., slightly darker or lighter HEX suggestions). Suggestions are computed by finding the luminance change needed to reach thresholds and adjusting the color in a perceptual space (HSL or LCH where available), then clamping to sRGB gamut. Suggestions are approximate and shown with delta magnitude.

FAQ

What is contrast ratio and why does it matter for accessibility?

Contrast ratio measures relative luminance difference between two colors using the WCAG formula (L1+0.05)/(L2+0.05). Higher ratios improve readability for users with low vision; WCAG uses specific thresholds (AA/AAA) to judge legibility.

How is contrast ratio calculated from HEX or RGB colors?

Each sRGB channel is converted to linear using the exact sRGB linearization (see 0.03928 / 12.92 / 0.055 / 1.055 / 2.4 constants), then relative luminance L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin. The contrast ratio is (L1+0.05)/(L2+0.05).

What are WCAG AA and AAA contrast requirements for normal and large text?

AA normal requires CR >= 4.5:1; AA large requires CR >= 3:1. AAA normal requires CR >= 7:1; AAA large requires CR >= 4.5:1. Large text is commonly ≥18pt (≈24px) or ≥14pt (≈18.66px) bold.

How do I measure contrast for semi-transparent colors (RGBA)?

If a color has alpha < 1, this tool composites the foreground over the background using standard source-over compositing (out = fg*alpha + bg*(1-alpha)). The resulting opaque color is used for luminance and contrast calculation. You can also specify the page background if needed.

How can I change a color to meet WCAG contrast thresholds?

The tool suggests slight lighter/darker HEX alternatives by computing the luminance change needed to cross the threshold and applying adjustments in a perceptual color space (HSL/LCH). Suggestions are capped to valid sRGB values and shown as approximations.

Does font size or weight affect the required contrast?

Yes: large text has a lower threshold (AA large: 3.0:1). The tool lets you preview sample text size and weight and applies the appropriate large-text rule. Note that implementations commonly map pt to px (e.g., 1pt ≈ 1.333px); the UI shows the exact mapping used.

Are CSS named colors supported?

Yes. The tool accepts CSS color names (per CSS Color Level 4) as well as #hex and rgb()/rgba() inputs and converts them to sRGB channels before computing luminance.

Is this tool client-side only and does it scan my website?

This is a client-side single-pair contrast checker. It does not scan domains or crawl websites. You can check one pair at a time or upload a small list (CSV/JSON) of color pairs for batch checks.