Open examples, checks, and related tools only after the primary input/output flow is done.
Guides
Examples
Starting points for this utility
#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)
Use cases
Color
Convert color tokens between HEX, RGB, and HSL
Check foreground and background contrast for AA and AAA thresholds
Copy a WCAG contrast report for design review or accessibility handoff
Check the exact foreground and background pair used in the UI.
Verify AA normal text, AA large text, and AAA normal text separately.
Copy the color format that matches the target codebase convention.
Color examples
Preview text for contrast checking.
Contrast ratio
5.17
AA
Foreground
#2563eb
Background
#ffffff
WCAG target
AA 4.5:1 / AAA 7:1
Use 3:1 only for large or bold text.
Color diagnostics
Check AA/AAA thresholds, alpha limitations, and luminance before copying design tokens.
AA normal text
Pass
4.5:1
AA large text
Pass
3:1
AAA normal text
Fail
7:1
AA delta
+0.67
Positive values clear normal text AA.
Luminance gap
0.847
Higher gaps usually read more clearly.
Color review notes
AA passes, but AAA text requires 7:1 contrast.
Color accessibility report
Copy a WCAG contrast handoff report with color values, thresholds, warnings, and accessibility checks.
Contrast status
AA
Contrast ratio
5.17
AA normal text
Pass
4.5:1
AA large text
Pass
3:1
AAA normal text
Fail
7:1
AA delta
+0.67
Luminance gap
0.847
Alpha input
No
Review notes
AA passes, but AAA text requires 7:1 contrast.
Accessibility checklist
Test the pair on the final rendered background, not only the solid preview.
Check hover, focus, disabled, visited, and selected states before shipping.
Confirm the actual font size and weight before relying on the large-text threshold.
Store foreground and background tokens together so the pair is reused intentionally.
Do not use color alone to communicate errors, warnings, or required actions.
# Color accessibility report
- Checked at: Browser copy time
- Foreground Input: #2563eb
- Foreground HEX: #2563eb
- Foreground RGB: rgb(37, 99, 235)
- Foreground HSL: hsl(221, 83.2%, 53.3%)
- Background Input: #ffffff
- Background HEX: #ffffff
- Background RGB: rgb(255, 255, 255)
- Background HSL: hsl(0, 0.0%, 100.0%)
- Contrast ratio: 5.17
- Contrast status: AA
- AA normal text: Pass (4.5:1)
- AA large text: Pass (3:1)
- AAA normal text: Fail (7:1)
- AA delta: +0.67
- Luminance gap: 0.847
- Alpha handling: No alpha input detected in the foreground/background fields.
## Review notes
- AA passes, but AAA text requires 7:1 contrast.
## Accessibility checklist
- Test the pair on the final rendered background, not only the solid preview.
- Check hover, focus, disabled, visited, and selected states before shipping.
- Confirm the actual font size and weight before relying on the large-text threshold.
- Store foreground and background tokens together so the pair is reused intentionally.
- Do not use color alone to communicate errors, warnings, or required actions.