Design & CSS
Processed locallyWCAG Color Contrast Checker
Check opaque text and background colors against WCAG AA and AAA thresholds.
Tool options · presets, sharing & more
Presets & sharing: options only, never files, text or passwords. Undo/redo: editable form values, not file selection or generated results.
How to Use WCAG Color Contrast Checker
Set the colors, layout dimensions, or animation preset.
Choose the remaining options shown in the form.
Generate the contrast report or CSS output.
Review the report or copy the CSS into your project.
What This Tool Does
Check opaque text and background colors against WCAG AA and AAA thresholds. Checks opaque sRGB colors. Large text thresholds apply at 18pt regular or 14pt bold. Transparency and image backgrounds require separate evaluation.
Common Use Cases
This tool processes files and input in this browser tab. Its processing code does not upload them to a server. Loading this page and fetching uncached app files uses an internet connection. Optional usage analytics requires your consent and excludes input, filenames, passwords and generated content. Form undo history and result transfers stay in session memory. Explicitly saved presets contain approved settings only.
Offline use is not verified for this tool. Keep an internet connection available to load its page, code and any additional dependencies.
Frequently Asked Questions
What should I check before using the result?
Checks opaque sRGB colors. Large text thresholds apply at 18pt regular or 14pt bold. Transparency and image backgrounds require separate evaluation.
Are my files or inputs uploaded?
No. This tool processes selected files and entered data locally in your browser. Only the page and its supporting code are downloaded.
Does this tool work offline?
Offline use is not verified for this tool. Keep an internet connection available to load its page, code and any additional dependencies.