51
Total shades
in database
21
Pass AA on white
41% of shades
14
Pass AAA on white
27% of shades
32
Pass AA on black
63% of shades
WCAG AA Score
Shades passing 4.5:1 on white
21 of 51 Brown shades achieve at least 4.5:1 contrast on white — the WCAG AA threshold for normal body text.
WCAG AAA Score
Shades passing 7:1 on white
14 of 51 Brown shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Brown shade as a background, use these text colors for WCAG AA compliance.
White text works on:
Dark text works on:
Recommended Backgrounds
When using a Brown shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Brown Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Blanched Almond | #FFEBCD | WCAG Fail1.2:1 | WCAG AAA18.0:1 | Text on black |
| Bisque | #FFE4C4 | WCAG Fail1.2:1 | WCAG AAA17.1:1 | Text on black |
| Moccasin | #FFE4B5 | WCAG Fail1.2:1 | WCAG AAA17.0:1 | Text on black |
| Navajo White | #FFDEAD | WCAG Fail1.3:1 | WCAG AAA16.3:1 | Text on black |
| Almond | #EFDECD | WCAG Fail1.3:1 | WCAG AAA16.0:1 | Text on black |
| Wheat | #F5DEB3 | WCAG Fail1.3:1 | WCAG AAA16.0:1 | Text on black |
| Buff | #F0DC82 | WCAG Fail1.4:1 | WCAG AAA15.3:1 | Text on black |
| Nude | #E3BC9A | WCAG Fail1.8:1 | WCAG AAA11.9:1 | Text on black |
| Burlywood | #DEB887 | WCAG Fail1.9:1 | WCAG AAA11.3:1 | Text on black |
| Tan | #D2B48C | WCAG Fail2.0:1 | WCAG AAA10.7:1 | Text on black |
| Sandy Brown | #F4A460 | WCAG Fail2.0:1 | WCAG AAA10.3:1 | Text on black |
| Fawn | #E5AA70 | WCAG Fail2.0:1 | WCAG AAA10.3:1 | Text on black |
| Ecru | #C2B280 | WCAG Fail2.1:1 | WCAG AAA10.0:1 | Text on black |
| Sand | #C2B280 | WCAG Fail2.1:1 | WCAG AAA10.0:1 | Text on black |
| Khaki | #C3B091 | WCAG Fail2.1:1 | WCAG AAA9.9:1 | Text on black |
| Desert | #C19A6B | WCAG Fail2.6:1 | WCAG AAA8.1:1 | Text on black |
| Fulvous | #E48400 | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Clay | #BD9372 | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Burnt Sienna | #E97451 | WCAG Fail3.0:1 | WCAG AAA7.1:1 | Text on black |
| Peru | #CD853F | WCAG Fail3.0:1 | WCAG AAA7.0:1 | Text on black |
| Raw Sienna | #CB8442 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Caramel | #C68642 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Mushroom | #A09080 | WCAG AA Large3.1:1 | WCAG AA6.8:1 | Text on black |
| Ochre | #CC7722 | WCAG AA Large3.4:1 | WCAG AA6.2:1 | Text on black |
| Cinnamon | #D2691E | WCAG AA Large3.6:1 | WCAG AA5.8:1 | Text on black |
| Earth | #A0785A | WCAG AA Large3.9:1 | WCAG AA5.3:1 | Text on black |
| Pale Brown | #987654 | WCAG AA Large4.2:1 | WCAG AA5.0:1 | Text on black |
| Jasper | #D05340 | WCAG AA Large4.2:1 | WCAG AA5.0:1 | Text on black |
| Tawny | #CD5700 | WCAG AA Large4.2:1 | WCAG AA5.0:1 | Text on black |
| Light Brown | #B5651D | WCAG AA Large4.3:1 | WCAG AA4.8:1 | Text on black |
| Mocha | #967117 | WCAG AA4.5:1 | WCAG AA4.7:1 | Text on white |
| Wood Brown | #927052 | WCAG AA4.5:1 | WCAG AA4.7:1 | Text on white |
| Mahogany | #C04000 | WCAG AA5.3:1 | WCAG AA Large4.0:1 | Text on white |
| Raw Umber | #826644 | WCAG AA5.3:1 | WCAG AA Large3.9:1 | Text on white |
| Rose Taupe | #905D5D | WCAG AA5.4:1 | WCAG AA Large3.9:1 | Text on white |
| Sienna | #A0522D | WCAG AA5.6:1 | WCAG AA Large3.7:1 | Text on white |
| Chestnut | #954535 | WCAG AA6.6:1 | WCAG AA Large3.2:1 | Text on white |
| Brown | #A52A2A | WCAG AAA7.1:1 | WCAG Fail3.0:1 | Text on white |
| Auburn | #A52A2A | WCAG AAA7.1:1 | WCAG Fail3.0:1 | Text on white |
| Saddle Brown | #8B4513 | WCAG AAA7.1:1 | WCAG Fail3.0:1 | Text on white |
| Cordovan | #893F45 | WCAG AAA7.3:1 | WCAG Fail2.9:1 | Text on white |
| Coffee | #6F4E37 | WCAG AAA7.4:1 | WCAG Fail2.8:1 | Text on white |
| Russet | #80461B | WCAG AAA7.5:1 | WCAG Fail2.8:1 | Text on white |
| Umber | #635147 | WCAG AAA7.5:1 | WCAG Fail2.8:1 | Text on white |
| Chocolate | #7B3F00 | WCAG AAA8.2:1 | WCAG Fail2.5:1 | Text on white |
| Sepia | #704214 | WCAG AAA8.5:1 | WCAG Fail2.5:1 | Text on white |
| Walnut | #5D432C | WCAG AAA9.1:1 | WCAG Fail2.3:1 | Text on white |
| Dark Brown | #5C4033 | WCAG AAA9.4:1 | WCAG Fail2.2:1 | Text on white |
| Taupe | #483C32 | WCAG AAA10.7:1 | WCAG Fail2.0:1 | Text on white |
| Dark Lava | #483C32 | WCAG AAA10.7:1 | WCAG Fail2.0:1 | Text on white |
| Bister | #3D2B1F | WCAG AAA13.4:1 | WCAG Fail1.6:1 | Text on white |
Accessibility Notes
- 1
Dark browns (700–900) pass WCAG AAA on white, offering contrast ratios above 7:1 — ideal for body text in warm-themed UIs.
- 2
Mid browns (400–600) vary; always check individual shades against the target background.
- 3
Light browns/tans (50–200) work as accessible backgrounds when paired with dark text — warm neutral alternatives to gray.
- 4
Brown can appear similar to dark orange or dark red in low-luminance environments — use with labels in critical UI.
- 5
Coffee and chocolate brand UIs frequently use brown as primary text; ensure the chosen shade passes AA.
Design Examples
BUTTON COMPONENT
Mocha — #967117
CARD WITH BROWN BACKGROUND
Card heading
A card component using Blanched Almond as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Mahogany background with white text — 5.3:1 contrast.
Design Tips
- ✓
Use #78350F or #92400E for accessible warm-toned heading text on white or cream backgrounds.
- ✓
Cream/tan (#FFF7ED, #FAFAF9) backgrounds paired with dark brown text create a distinctive, accessible warm aesthetic.
- ✓
Brown works well for wood, food, and outdoor brand design systems — use 700+ shades for text.