Color Contrast Ratio Checker
Enter foreground and background HEX colors. Compute sRGB relative luminance and contrast ratio. Return ratio plus AA/AAA threshold booleans.
About this color contrast ratio checker
Enter foreground and background HEX colors. Compute sRGB relative luminance and contrast ratio. Return ratio plus AA/AAA threshold booleans Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Computes color space transformations and accessibility metrics conforming to W3C CSS Color Module Level 4, CIE 1931 XYZ, sRGB, HSL, HSV, CIELAB, and WCAG 2.1 contrast guidelines. Contrast ratios calculate relative luminance ($L = 0.2126R + 0.7152G + 0.0722B$) with gamma expansion, enforcing minimum ratios of 4.5:1 for standard text (Level AA) and 7:1 for enhanced text (Level AAA). Color blindness simulations evaluate 3x3 spectral transformation matrices for Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Worked image transformation 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:
Resolution, dimension & memory limits
Only two opaque supplied colors are assessed. The displayed ratio rounds to two decimals, while threshold booleans use the unrounded value, so a displayed 4.5 can still fail normal-text AA. No rendered interface, non-text contrast or full accessibility conformance is checked.
Color Contrast Ratio Checker image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in Color Contrast Ratio Checker are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- WCAG AA/AAA contrast thresholds with the current 0.04045 sRGB transfer cutoff (two supplied opaque colors only)
Color Contrast Ratio Checker verification · Audit standards
How to use it
- Enter, paste, or select your input data into the Color Contrast Ratio Checker workspace controls.
- Review parameter fields, units, or options configured for Color Contrast Ratio Checker.
- Click the action button or observe immediate live calculations rendered by Color Contrast Ratio Checker.
Frequently asked questions
How does the contrast checker calculate a result?+
It parses two three- or six-digit HEX colors and computes sRGB relative luminance using the 0.04045/12.92 and 2.4 branches. The displayed ratio is rounded to two decimals, but the AA 4.5, large-text AA 3, and AAA 7 booleans compare the unrounded ratio.
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 HEX formats other than three or six hexadecimal digits throw an error. It evaluates only two supplied opaque RGB colors; it does not model compositing, transparency, gradients, fonts, ambient light, or legal accessibility conformance.
What result should the documented example produce?+
For black foreground on white background, expect contrast ratio 21:1 and all three built-in threshold checks to be true.