ColorPairLabUsing indigo on lavender
Indigo gives a lavender panel a deep violet text color. Try the pair with a real paragraph as well as a title before using it in a reading layout.
WCAG text contrast results
| Text criterion | Required ratio | Result |
|---|---|---|
| AA normal text | 4.5:1 | Pass |
| AA large text | 3:1 | Pass |
| AAA normal text | 7:1 | Pass |
| AAA large text | 4.5:1 | Pass |
This pair passes AA for normal text. It also passes AAA for normal text. The displayed ratio is rounded to two decimal places; every decision uses the full calculation.
Choose the result for your text size
A 16 px regular label uses the normal-text result. A 24 px regular heading qualifies as large text. Match the result to the size and weight used in your design. If a small label fails, try a different color before making the label larger.
.pair-example {
color: #4B0082;
background-color: #E6E6FA;
font-size: 16px;
}Try the reverse pair
Use Swap colors to put lavender text on indigo. The ratio remains 10.52:1, but the page can feel very different when most of it becomes indigo. Check the new arrangement with real text and the surrounding layout.