Color - Contrast

Metrics

Contrast Ratio

<MATH> \text{Contrast Ratior} = (L1 + 0.05) / (L2 + 0.05) </MATH> where:

  • L1 is the relative luminance of the lighter of the colors
  • L2 is the relative luminance of the darker of the colors.

Ref:

Minimum

Minimum Sepcification as defined by the w3c. The contrast ratio must be least 4.5:1, except for the following:

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
  • Incidental: cosmetic, decoration, not visible to anyone, no significant
  • Logo: Text that is part of a logo or brand name has no contrast requirement.

Translation in web by Google Lighthouse:

  • 3:1 for text that is 18 pt, or 14 pt and bold
  • 4.5:1 for All other text

Get and Set: Chrome Color Picker

With the chrome devtool, you can show the color picker that calculate the contrast.

Below the contrast has a value of 2.57 and that is not good.


Powered by ComboStrap