Skip to content

Instantly share code, notes, and snippets.

@jasonm23
Last active September 2, 2022 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasonm23/26be130c98dc6f817619f42f522f313b to your computer and use it in GitHub Desktop.
Save jasonm23/26be130c98dc6f817619f42f522f313b to your computer and use it in GitHub Desktop.
Notes on color contrast WCAG

Notes on color contrast WCAG

contrast-ratios
(L1 + 0.05) / (L2 + 0.05)

Where

L1 is the relative luminance of the lighter of the colors, and L2 is the relative luminance of the darker of the colors.

Note 1: Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

success-ratio

Normal text >= 4.5:1 Larger text >= 3:1

a lower ratio is a fail.

relative-luminance

The relative brightness of any point in a colorspace, normalized to 0.0 for darkest black and 1.0 for lightest white

Note 1: For the sRGB colorspace, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B 

Where R, G and B are defined as:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment