# Color - Contrast

## Metrics

### Contrast Ratio

$$\text{Contrast Ratior} = (L1 + 0.05) / (L2 + 0.05)$$ 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.