WCAG Ratios: Non-text contrast requires a minimum ratio of 3.0:1. Text contrast requires a minimum ratio of 4.5:1 for normal text at AA and 7.0:1 for normal text at AAA.
Important Notes: While some color combinations meet WCAG compliance, not all are recommended for UVU brand use. Please refer to the examples provided to ensure your color choices align with both WCAG standards and UVU recommendations.
Non-Text Elements: This category refers to graphical elements where two colors meet, such as icons, strokes, controls, and boundaries. The examples below use icons as quick visual references, but the same contrast rules apply to other UI graphics and component boundaries.
Recommended Use: Some combinations may technically pass WCAG but still feel weak, muddy, or off-brand in practice. Use the passing examples as a compliance reference, then apply brand judgment when selecting final pairings.
How this tool works: The current JavaScript compares a fixed set of color values from js/color-contrast-tool.js, then filters the results by text size and compliance level. The filter dropdown uses the color names defined in that script.
Quick Contrast Reference
| Use Case | Minimum Ratio | Notes |
|---|---|---|
| Normal text — AA | 4.5:1 | Standard body text and most interface text |
| Large text — AA | 3.0:1 | Large text means 24px regular or 18.66px bold and up |
| Normal text — AAA | 7.0:1 | Higher readability target |
| Large text — AAA | 4.5:1 | Higher readability target for large text |
| Non-text UI contrast | 3.0:1 | Icons, focus indicators, control boundaries, and graphical objects |
How to Read the Results
| Item | Meaning |
|---|---|
| Background | The background color name and hex value used for the card |
| Text | The foreground color name and hex value tested against that background |
| Contrast Ratio | The measured contrast between the two selected colors |
| Compliance | The script labels each passing pair as AA or AAA based on the active thresholds |
Passing contrast is the minimum requirement, not the only design goal. For text-heavy content, prioritize combinations with stronger readability, clear hierarchy, and good brand alignment instead of stopping at the minimum ratio.
It seems that you have reduce motion enabled!