#12B89A
#2D55FF
#F2D50F
#121212
#FF3D7F
Contrast
Can people read it?
Each cell is the row colour as text on the column colour, with its WCAG 2.2 contrast ratio. Ratios are cut, never rounded up: 4.49 is not 4.5.
AAA 7:1 or more: any text
AA 4.5:1: body text
AA large 3:1: large text (24px, or 14pt bold, about 18.7px) and buttons, icons, borders
Fails under 3:1: decoration only
| Text colour | #12B89A | #2D55FF | #F2D50F | #121212 | #FF3D7F |
|---|---|---|---|---|---|
| #12B89A | same colour | 2.16:1Fails | 1.71:1Fails | 7.44:1AAA | 1.34:1Fails |
| #2D55FF | 2.16:1Fails | same colour | 3.70:1AA large | 3.43:1AA large | 1.61:1Fails |
| #F2D50F | 1.71:1Fails | 3.70:1AA large | same colour | 12.75:1AAA | 2.29:1Fails |
| #121212 | 7.44:1AAA | 3.43:1AA large | 12.75:1AAA | same colour | 5.55:1AA |
| #FF3D7F | 1.34:1Fails | 1.61:1Fails | 2.29:1Fails | 5.55:1AA | same colour |
Best pairs for text
Every pair that reaches 4.5:1, strongest first, with plain white and near-black added as candidates.
#121212 + #FFFFFF 18.73:1 AAA
#121212 + #F2D50F 12.75:1 AAA
#121212 + #12B89A 7.44:1 AAA
#121212 + #FF3D7F 5.55:1 AA
#2D55FF + #FFFFFF 5.44:1 AA
Contrast is one part of accessibility, not all of it. RiotPad checks colour pairs against WCAG 2.2; it does not certify a website as accessible. Ratios use the WCAG 2.2 relative-luminance formula (Success Criteria 1.4.3, 1.4.6 and 1.4.11).