A product information panel
Use deep navy against cream for information, then inspect the red action and its label. Orange and yellow should not carry availability meaning alone.
Colors and palette casesEditorial example reviewed September 13, 2026. Numeric results below are calculated from these values.
Assign roles and check the pair
The lightest and darkest supplied values are the starting reading pair. The accent label adds black or white, whichever has greater contrast. You can change the accent below.
A palette in context
Use this preview to inspect reading text and an accent label.
Example actionReading text #003049 on #EAE2B7: 10.573:1 - Pass normal text AA.
Accent label #FFFFFF on #003049: 13.825:1.
Checks use unrounded ratios and opaque sRGB. The example action is a visual sample. Test boundaries, focus and hover in your actual component.
All color pairs: normal text AA
| Text / background | #003049 | #D62828 | #F77F00 | #FCBF49 | #EAE2B7 |
|---|---|---|---|---|---|
| #003049 | 1.00:1 Fail | 2.76:1 Fail | 5.26:1 Pass | 8.35:1 Pass | 10.57:1 Pass |
| #D62828 | 2.76:1 Fail | 1.00:1 Fail | 1.91:1 Fail | 3.03:1 Fail | 3.83:1 Fail |
| #F77F00 | 5.26:1 Pass | 1.91:1 Fail | 1.00:1 Fail | 1.59:1 Fail | 2.01:1 Fail |
| #FCBF49 | 8.35:1 Pass | 3.03:1 Fail | 1.59:1 Fail | 1.00:1 Fail | 1.27:1 Fail |
| #EAE2B7 | 10.57:1 Pass | 3.83:1 Fail | 2.01:1 Fail | 1.27:1 Fail | 1.00:1 Fail |
:root {
--surface: #EAE2B7;
--text: #003049;
--accent: #003049;
--on-accent: #FFFFFF;
}Keep the scope of each result clear
All comparisons use opaque sRGB and WCAG relative luminance. Normal-text AA requires 4.5:1; a displayed rounded ratio never overrides the unrounded pass or fail. A palette is not a complete accessibility audit.
W3C contrast requirements ? Methods and limitations ? Turn values into semantic tokens