WCAG foreground / background contrast
Contrast from sRGB relative luminance; translucent foregrounds are first composited over your chosen opaque background, then normal/large-text AA and AAA verdicts with their premise are shown.
Inputs and parameters
foreground— Foreground colourbackground— Actual background colour (must be opaque)alpha— Foreground opacity 0–100 (slider or keyboard)largeText— Judge using large-text criteria (≥24px regular / ≥18.66px bold)
Real example
foreground=#000000, background=#ffffff, alpha=100 → 21:1; identical #176b50/#176b50 → 1:1; alpha=50 → composites to #808080, about 3.98:1
→ Contrast ratio: 21.00:1 · normal AA pass · normal AAA pass; alpha=50 → 3.98:1 · normal AA fail · large AA passLimits and failure handling
Uses the WCAG 2.1/2.2 sRGB relative-luminance formula; it does not evaluate actual font size, typeface, anti-aliasing, image/gradient backgrounds, translucent overlays or display colour management, and the background must be opaque. Treat the result as design guidance, not a substitute for review on real devices.
FAQ
What are the normal and large-text thresholds?
Normal text AA ≥4.5:1, AAA ≥7:1; large text AA ≥3:1, AAA ≥4.5:1. Large means ≥18pt (24px) regular or ≥14pt (~18.66px) bold.
How is translucent text handled?
The foreground is first source-over composited at your alpha over the chosen opaque background, then luminance is computed from the resulting solid colour. A transparent background raises TRANSPARENT_BACKGROUND.
What is the premise of the verdict?
The premise is solid opaque text on a solid opaque background; it excludes text over images, gradients, translucent overlays, anti-aliasing and display colour-management differences.