Design Utility

Accessibility Contrast Checker

This tool checks whether a text color and background color combination meets contrast expectations before you ship a button, card, or content block.

What it does

Calculates the contrast ratio between foreground and background colors.
Shows whether the pair passes WCAG AA and AAA thresholds.
Lets you preview both normal text and larger heading-style text.
Helps you test real UI combinations without storing any data.

How to use it

Open /AccessibilityContrastChecker/ in your browser.
Set the foreground and background colors with the controls.
Review the live ratio and the pass/fail indicators.
Toggle large text if the combination is intended for large headings.
Use the preview to judge whether the pair is comfortable in practice, not only mathematically valid.

Project structure

index.php: application shell and live preview layout.
css/style.css: project-specific interface styling.
js/app.js: contrast math, preview updates, and interaction logic.
Documentation/index.html: this usage guide.

Notes

This is a browser-based utility and does not require a database.
The checker is best used as a fast design QA step, not a full accessibility audit.
Even when ratios pass, visual comfort should still be checked in context.

Tip:

Test your body text pair first, then reuse the same background while exploring button and badge colors to keep contrast decisions consistent across the interface.