Riot Pass $1.95/moFree during preview
#FF3D7F
#2D55FF
#F2D50F
#12B89A
#121212

Showing the RiotPad demo palette. Make your own on the Pad.

Edit on the PadRiot meSwatch card

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
Contrast ratio of each text colour (rows) on each background colour (columns)
Text colour #FF3D7F #2D55FF #F2D50F #12B89A #121212
#FF3D7F same colour Aa1.61:1Fails Aa2.29:1Fails Aa1.34:1Fails Aa5.55:1AA
#2D55FF Aa1.61:1Fails same colour Aa3.70:1AA large Aa2.16:1Fails Aa3.43:1AA large
#F2D50F Aa2.29:1Fails Aa3.70:1AA large same colour Aa1.71:1Fails Aa12.75:1AAA
#12B89A Aa1.34:1Fails Aa2.16:1Fails Aa1.71:1Fails same colour Aa7.44:1AAA
#121212 Aa5.55:1AA Aa3.43:1AA large Aa12.75:1AAA Aa7.44:1AAA same colour

Best pairs for text

Every pair that reaches 4.5:1, strongest first, with plain white and near-black added as candidates.

  • Read meRead me

    #121212 + #FFFFFF 18.73:1 AAA

  • Read meRead me

    #121212 + #F2D50F 12.75:1 AAA

  • Read meRead me

    #121212 + #12B89A 7.44:1 AAA

  • Read meRead me

    #121212 + #FF3D7F 5.55:1 AA

  • Read meRead me

    #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).