WCAG Color Contrast Checker
WCAG Color Contrast Checker: Calculates relative luminance values L1 = 1.0, L2 = 0.117 and computes contrast ratio (L1 + 0.05) / (L2 + 0.05).
About this wcag color contrast checker
WCAG Color Contrast Checker — browser-based utility.
How this tool works
Implements client-side WCAG Color Contrast Checker operations. Calculates relative luminance values L1 = 1.0, L2 = 0.117 and computes contrast ratio (L1 + 0.05) / (L2 + 0.05) specifically designed for an accessibility auditor checks whether button text color meets wcag 2.1 aa and aaa readability standards.
- Color Space Parsing & Gamut Ingestion: Ingests HEX, RGB, HSL, HWB, Lab, or LCH strings, normalizing components to [0, 1] float representations.
- Linearization & Gamma Expansion: Transforms non-linear sRGB values to linear luminance coordinates using standard CIE transfer curves.
- Matrix Multiplication & Contrast Modeling: Calculates relative luminance and computes contrast ratios against foreground/background pairs.
- Color Palette Synthesis: Generates harmonious color palettes (monochromatic, complementary, triadic, analogous) with CSS variable exports.
Worked example
Scenario: Check black against white.
Sample input:
Processing: Convert sRGB to luminance and divide lighter-plus-0.05 by darker-plus-0.05.
Illustrative output:
Limits and verification
Clamps out-of-gamut color coordinates to standard sRGB bounds. In color blindness simulations, highlights when critical status indicators (such as red error vs green success) become indistinguishable under deuteranopia.
Examples demonstrate an expected workflow; they do not prove every input or every branch of an external specification. Check important results with an independent source before using them for money, security, compliance, safety, or irreversible file changes.
Browser processing boundary
Tool input is processed by code running in the browser and is not intentionally sent to a CZOA processing API. The page can still request ordinary site assets, analytics, or advertising when those services are enabled. Browser extensions and managed-device software remain outside this tool's control.
Relevant references
These references govern or help explain the format, protocol, or calculation used here. Listing a reference does not claim certification or complete implementation of every optional feature.
- W3C CSS Color Module Level 4
- CIE 1931 Color Space Standard
Content owner: CZOA Tools · Last reviewed: 2026-09-15 · Review methodology
How to use it
- Enter, paste, or select your input data into the WCAG Color Contrast Checker workspace controls.
- Review available parameter fields, units, formats, or options configured for your task.
- Click the action button or observe immediate live calculations rendered in your browser runtime.
- Inspect the resulting output and any diagnostic messages, then copy or download the result if needed.
Frequently asked questions
How does the contrast checker calculate a result?+
It parses two six-digit hexadecimal colors, converts sRGB channels to relative luminance with the 0.03928/12.92 and 2.4 transfer branches, then returns the rounded ratio and fixed thresholds: normal AA 4.5, large-text AA 3, AAA 7.
Which inputs and controls are available?+
One JSON text input accepts foreground and background color values. There is no font family, size, weight, opacity, image sampling, palette selection, APCA mode, export, or batch control.
Which limits matter?+
Invalid non-six-digit hexadecimal colors throw an error. It evaluates only the two supplied opaque RGB colors; it does not model compositing, transparency, gradients, fonts, ambient light, or legal accessibility conformance.
What did the isolated browser fixture verify?+
A browser fixture submitted black foreground and white background and independently checked ratio 21 with all three boolean thresholds true. Network requests observed during the example contained no submitted value payload.