WCAG AA Color Pairs
Practical foreground and background pairs that meet WCAG AA contrast targets for normal text.
Quick Pair Table
These pairs are useful defaults when you need readable small text quickly.
| Foreground | Background | Ratio | Use |
|---|---|---|---|
| #111827 |
#F9FAFB
|
16.98:1 | Body text |
| #1E40AF |
#DBEAFE
|
7.15:1 | Info banners |
| #7F1D1D |
#FEF2F2
|
9.16:1 | Error text |
AA Text Pairs
Slate text on white
Strong default body text for dashboards, docs, and settings pages.
Blue link on white
A readable link color that still looks interactive.
Green status text
Works for success banners and confirmation messages.
Amber warning text
Keeps warning messages readable on a pale tinted surface.
FAQ
How should I use this WCAG AA color pair reference? v
Use it as a starting point, then test the exact foreground, background, and UI state colors in the context where they will appear.
Are the HEX values ready to copy? v
Yes. The listed values are formatted for CSS, design files, and token documentation.
Should I still check contrast? v
Yes. Any color used for text, icons, controls, or status messages should be checked against its actual background.
Related Color Tools
Open the next tool for this color task.
Color Contrast Checker
converterCheck text and background colors against WCAG ratios.
Accessible Color Combinations for Readable UI
educationalUse accessible color combinations with measured contrast examples for buttons, text, surfaces, and status states.
Accessible Button Color Combinations
educationalMeasured button text and fill color combinations.
Accessibility Color Tools - Contrast & WCAG
tool-hubContrast tools and measured accessible color examples.