Check your brand colours for contrast.
Every text colour on every background in your palette, graded against WCAG 2.2 in one grid. When a pair fails, you get the nearest shade that passes.
Your palette
- Terracotta
- Espresso
- Crema
- Cocoa
- Sage
- Oat
- Milk
12 of 42 pairs pass AA for body text.
| TextBackground | Terracotta | Espresso | Crema | Cocoa | Sage | Oat | Milk |
|---|---|---|---|---|---|---|---|
| Terracotta | Same colour | Aa3.96:1 · AA large | Aa2.30:1 · Fail | Aa1.89:1 · Fail | Aa1.40:1 · Fail | Aa3.50:1 · AA large | Aa4.11:1 · AA large |
| Espresso | Aa3.96:1 · AA large | Same colour | Aa9.12:1 · AAA | Aa2.10:1 · Fail | Aa5.54:1 · AA | Aa13.87:1 · AAA | Aa16.28:1 · AAA |
| Crema | Aa2.30:1 · Fail | Aa9.12:1 · AAA | Same colour | Aa4.34:1 · AA large | Aa1.64:1 · Fail | Aa1.52:1 · Fail | Aa1.79:1 · Fail |
| Cocoa | Aa1.89:1 · Fail | Aa2.10:1 · Fail | Aa4.34:1 · AA large | Same colour | Aa2.64:1 · Fail | Aa6.61:1 · AA | Aa7.75:1 · AAA |
| Sage | Aa1.40:1 · Fail | Aa5.54:1 · AA | Aa1.64:1 · Fail | Aa2.64:1 · Fail | Same colour | Aa2.50:1 · Fail | Aa2.94:1 · Fail |
| Oat | Aa3.50:1 · AA large | Aa13.87:1 · AAA | Aa1.52:1 · Fail | Aa6.61:1 · AA | Aa2.50:1 · Fail | Same colour | Aa1.17:1 · Fail |
| Milk | Aa4.11:1 · AA large | Aa16.28:1 · AAA | Aa1.79:1 · Fail | Aa7.75:1 · AAA | Aa2.94:1 · Fail | Aa1.17:1 · Fail | Same colour |
Close, but not passing
- AaAa
Cocoa and Crema reach 4.34:1. Darken Cocoa to
#674738and they reach 4.56:1. - AaAa
Milk and Terracotta reach 4.11:1. Darken Terracotta to
#BA5737and they reach 4.59:1. - AaAa
Espresso and Terracotta reach 3.96:1. Lighten Terracotta to
#CC6D4Fand they reach 4.62:1. - AaAa
Oat and Terracotta reach 3.50:1. Darken Terracotta to
#AA5033and they reach 4.51:1. - AaAa
Milk and Sage reach 2.94:1. Darken Sage to
#6D7862and they reach 4.58:1. - AaAa
Sage and Cocoa reach 2.64:1. Darken Cocoa to
#3C2920and they reach 4.60:1.
What the grades mean
- AAA · 7:1
- The strongest level. Comfortable for long reading and for people with low vision.
- AA · 4.5:1
- The standard most laws and style guides ask for. The minimum for body text and small labels.
- AA large · 3:1
- Enough for large text (24px, or about 19px bold) and for icons, input borders and other parts of an interface. Not for body text.
- Fail · under 3:1
- Fine for decoration, never for anything someone has to read or use.
Let every tool check it for you.
In Stipl, this check runs on every colour in your brandpad, and every tool only uses the pairs that pass.