Autumn Contrast
Checker
Test warm text and background colors — browns, ambers, rusts and creams — against WCAG 2 contrast requirements, and fix failing pairs in one click.
Last reviewed on October 4, 2026
Test a Color
Pair
Harvest moon over the orchard
Body text at 16px. The last warm evenings of October are a good time to finish what you started in September.
Small print at 12.8px — the hardest case to read.
Contrast ratio
| Normal text — AA (4.5:1) | -- |
| Large text — AA (3:1) | -- |
| Normal text — AAA (7:1) | -- |
| Large text — AAA (4.5:1) | -- |
| UI components & graphics (3:1) | -- |
Warm Pairs
That Work
Pre-checked warm color pairs
Ratios below are calculated with the WCAG 2 formula. Click Load to open a pair in the checker.
| Sample | Pair | Colors | Ratio | AA text | Large / UI | AAA text | |
|---|---|---|---|---|---|---|---|
| Aa | Espresso on cream | #2d1b0e / #faf5ef | 15.20:1 | Pass | Pass | Pass | |
| Aa | Walnut on parchment | #6b3a2a / #f5e6d0 | 7.56:1 | Pass | Pass | Pass | |
| Aa | Saddlebrown on cornsilk | #8b4513 / #fff8dc | 6.66:1 | Pass | Pass | Fail | |
| Aa | Olive on linen | #556b2f / #faf0e6 | 5.29:1 | Pass | Pass | Fail | |
| Aa | Maroon on oldlace | #800000 / #fdf5e6 | 10.11:1 | Pass | Pass | Pass | |
| Aa | Sienna on floralwhite | #a0522d / #fffaf0 | 5.40:1 | Pass | Pass | Fail | |
| Aa | Ember on cream | #c44d2b / #faf5ef | 4.36:1 | Fail | Pass | Fail | |
| Aa | Amber on cream | #e8913a / #faf5ef | 2.27:1 | Fail | Fail | Fail | |
| Aa | Cream on midnight | #faf5ef / #1a2235 | 14.63:1 | Pass | Pass | Pass | |
| Aa | Gold on espresso | #d4a254 / #2d1b0e | 7.14:1 | Pass | Pass | Pass | |
| Aa | Linen on night | #e8e0d6 / #0b0f1a | 14.64:1 | Pass | Pass | Pass | |
| Aa | Sage on cream | #7c9a6e / #faf5ef | 2.89:1 | Fail | Fail | Fail |
Typography tips for warm palettes
- Use off-white, not pure white. Creams such as #faf5ef or
linensoften the page; they cost very little contrast against dark brown text. - Keep orange for display sizes. Amber and pumpkin tones work for headings of 24px and up, buttons with dark labels, and icons — not for paragraphs.
- Dark mode needs lighter text, not white. A warm linen such as #e8e0d6 on a near-black background is easier on the eyes than #ffffff and still exceeds 7:1.
- Check links and placeholders too. Link colors must contrast with the background (and should be distinguishable from body text by more than color alone); placeholder text is often the lowest-contrast element on a form.
- Browse fall shades in autumn CSS color names or copy whole palettes from the autumn design system.
Frequently asked questions
What contrast ratio does WCAG require for text?
WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text (at least 24px, or about 18.66px when bold). Level AAA raises this to 7:1 and 4.5:1. User-interface components and meaningful graphics need 3:1 against adjacent colors.
Why do orange and amber text fail on cream backgrounds?
Mid-tone oranges are bright: their relative luminance is close to that of light creams, so the ratio stays low. Amber #e8913a on cream #faf5ef is only 2.27:1. Use orange for large headings, icons or backgrounds, and use a dark brown for body text.
How is the contrast ratio calculated?
Each color is converted to relative luminance (L) by linearising its sRGB channels and weighting them 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 (identical) to 21:1 (black on white).
What does the Fix button do?
It keeps the hue and saturation of your text color and steps its lightness darker (or lighter, on dark backgrounds) until the pair reaches 4.5:1, so you get the closest compliant shade of the same color.