36
Total shades
in database
0
Pass AA on white
0% of shades
0
Pass AAA on white
0% of shades
36
Pass AA on black
100% of shades
WCAG AA Score
Shades passing 4.5:1 on white
0 of 36 Orange 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
0 of 36 Orange shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Orange shade as a background, use these text colors for WCAG AA compliance.
Dark text works on:
Recommended Backgrounds
When using a Orange shade as text color, these backgrounds provide WCAG AA compliance.
Automated Accessibility Validation — All Orange Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Papaya Whip | #FFEFD5 | WCAG Fail1.1:1 | WCAG AAA18.6:1 | Text on black |
| Apricot | #FBCEB1 | WCAG Fail1.4:1 | WCAG AAA14.6:1 | Text on black |
| Peach | #FFCBA4 | WCAG Fail1.5:1 | WCAG AAA14.3:1 | Text on black |
| Saffron | #F4C430 | WCAG Fail1.6:1 | WCAG AAA12.8:1 | Text on black |
| Amber | #FFBF00 | WCAG Fail1.6:1 | WCAG AAA12.7:1 | Text on black |
| Creamsicle | #FFBB7D | WCAG Fail1.7:1 | WCAG AAA12.7:1 | Text on black |
| Mango | #FDBE02 | WCAG Fail1.7:1 | WCAG AAA12.5:1 | Text on black |
| Light Orange | #FFB347 | WCAG Fail1.8:1 | WCAG AAA11.8:1 | Text on black |
| Orange | #FFA500 | WCAG Fail2.0:1 | WCAG AAA10.6:1 | Text on black |
| Sorbet | #FF9A62 | WCAG Fail2.1:1 | WCAG AAA10.1:1 | Text on black |
| Atomic Tangerine | #FF9966 | WCAG Fail2.1:1 | WCAG AAA10.0:1 | Text on black |
| Papaya | #FF9470 | WCAG Fail2.2:1 | WCAG AAA9.7:1 | Text on black |
| Marigold | #EAA221 | WCAG Fail2.2:1 | WCAG AAA9.7:1 | Text on black |
| Squash | #F4981E | WCAG Fail2.2:1 | WCAG AAA9.4:1 | Text on black |
| Dark Orange | #FF8C00 | WCAG Fail2.3:1 | WCAG AAA9.0:1 | Text on black |
| Butterscotch | #E3963E | WCAG Fail2.4:1 | WCAG AAA8.7:1 | Text on black |
| Nectarine | #FF8348 | WCAG Fail2.4:1 | WCAG AAA8.6:1 | Text on black |
| Tiger Orange | #FD7F20 | WCAG Fail2.5:1 | WCAG AAA8.2:1 | Text on black |
| Tangerine | #F28500 | WCAG Fail2.6:1 | WCAG AAA8.1:1 | Text on black |
| Pumpkin | #FF7518 | WCAG Fail2.7:1 | WCAG AAA7.8:1 | Text on black |
| Mandarin | #F37A48 | WCAG Fail2.7:1 | WCAG AAA7.7:1 | Text on black |
| Kumquat | #E8820C | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Safety Orange | #FF6700 | WCAG Fail2.9:1 | WCAG AAA7.2:1 | Text on black |
| Sunset Orange | #FD5E53 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Caramel Orange | #C68642 | WCAG AA Large3.0:1 | WCAG AA6.9:1 | Text on black |
| Clementine | #E96E00 | WCAG AA Large3.1:1 | WCAG AA6.7:1 | Text on black |
| Bronze | #CD7F32 | WCAG AA Large3.1:1 | WCAG AA6.7:1 | Text on black |
| Deep Orange | #FF5722 | WCAG AA Large3.2:1 | WCAG AA6.6:1 | Text on black |
| Orioles Orange | #FB4F14 | WCAG AA Large3.4:1 | WCAG AA6.2:1 | Text on black |
| Harvest Orange | #DA6A00 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Persimmon | #EC5800 | WCAG AA Large3.5:1 | WCAG AA6.0:1 | Text on black |
| Cinnamon Orange | #D2691E | WCAG AA Large3.6:1 | WCAG AA5.8:1 | Text on black |
| Flame | #E25822 | WCAG AA Large3.7:1 | WCAG AA5.7:1 | Text on black |
| Copper | #B87333 | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Fiesta Orange | #DD4132 | WCAG AA Large4.3:1 | WCAG AA4.9:1 | Text on black |
| Burnt Orange | #CC5500 | WCAG AA Large4.3:1 | WCAG AA4.9:1 | Text on black |
Accessibility Notes
- 1
Mid-range oranges (400–600) frequently fail WCAG AA on white backgrounds due to their high luminance — always verify contrast.
- 2
Dark oranges (700–900) pass WCAG AA on white and are suitable for body text and interactive elements.
- 3
Orange is commonly confused with yellow or brown by people with color vision deficiency — use additional cues.
- 4
Light orange backgrounds (#FFF7ED, #FFEDD5) pair excellently with dark text and are among the most accessible combinations in warm palettes.
- 5
Orange saturates quickly on screens — what looks subtle in design tools may appear more intense on high-brightness displays.
Design Examples
CARD WITH ORANGE BACKGROUND
Card heading
A card component using Papaya Whip as the background. Dark text ensures readability.
Design Tips
- ✓
Use #C2410C or #9A3412 for text or interactive states on white backgrounds.
- ✓
Light orange (#FFF7ED) paired with dark gray or black text is a beautiful, accessible warm neutral.
- ✓
For CTA buttons, test the specific orange shade in the Contrast Checker to confirm AA compliance.