Accessibility · WCAG 2.2
ContrastCheck
Check the contrast ratio between two colors according to WCAG 2.2 AA / AAA. Automatically suggests the closest color that passes the chosen criterion. No data sent: everything happens in your browser.
Configure colors
Contrast ratio
17.04:1
Context threshold: AA 4.5:1 · AAA 7:1
OnStage APS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sample text on chosen background.
Preview of selected colors
WCAG 2.2 Evaluation
- ✅ Pass
WCAG 2.2 AA — Normal text
Minimum required: 4.5:1 · Current: 17.04:1
- ✅ Pass
WCAG 2.2 AAA — Normal text
Minimum required: 7:1 · Current: 17.04:1
No data is sent to external servers. 100% in-browser calculation. AGPL-3.0 license - source code.
Frequently asked questions
What is the difference between AA and AAA level?
AA level (4.5:1 for normal text, 3:1 for large text) is the minimum legal compliance requirement. AAA level (7:1 for normal text) offers maximum accessibility but is often difficult to achieve while maintaining attractive design.
What is meant by "large text"?
Text is considered "large" if it's at least 18pt (24px) in normal style or 14pt (18.67px) in bold style. For large text WCAG 2.2 requires a minimum contrast of 3:1 (AA) or 4.5:1 (AAA).
Does the tool also check UI elements (buttons, borders)?
Yes: the "UI Components" section verifies contrast for non-text elements such as input borders, icons and focus states. The WCAG 2.2 requirement for these elements is 3:1.
How does automatic color suggestion work?
The system calculates the relative luminance of the background color and suggests the closest text color (among dark and light variants) that exceeds the AA ratio. The suggested color maintains the original hue.
Can I check the contrast of a specific combination?
Yes: enter any HEX, RGB or HSL value in the color fields. The tool calculates the ratio in real time and shows evaluation for all WCAG levels.
Is the tool usable by people with color blindness?
Yes: results are communicated both through text and through icons. The green/red badge is accompanied by the text "Pass" / "Fail" to be understandable even without color distinction.