Contrast (Light vs Dark Color Ratio)

Monet Femme Ombrelle 1886 Logo

About

contrast is a luminance ratio showing the difference between the most lighter color and the most darker color of an object.

Generally, the contrast is calculated between two objects contigu.

The more contrast, the more readable is a text or an object. It makes:

  • live easier for people with visual impairments
  • and helps in imperfect conditions like low-light environments or older screens.

Online calculation

Example

On a black background (luminance of 0):

  • because yellow has a bigger luminance (0.92),
  • than blue (0.07)
  • it's more readable.

Demonstration:

Above 5 is considered a good contrast

Color 1 Color 2 Ratio
Black White 21 (Max)
Black Gray 5.31
Black Yellow 19,55
Black Blue 2.44
Black Green 4.08
White Yellow 1.07
White Blue 8.59
White Green 5.13

Metrics

Contrast Ratio

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

+0.05 because luminance is a scale value that can be 0

1) 2)

Minimum

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

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3
  • 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 for text that is 18 pt, or 14 pt and bold
  • 4.5 for All other text

Tool

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.

Color Picker Contrast Ratio Chorme Devtool

Contrast Checker

https://codepen.io/alvaromontoro/pen/YgpWZG





Discover More
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
Monet Femme Ombrelle 1886 Logo
Color

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Color Saturation
Color - (Saturation|Chroma|Intensity) (Purity of a hue)

The third descriptive quality of colour is saturation, also known as chroma or intensity. It defines the degree of purity of a hue. Saturation: is a (comparative|relative) property is linear and...
Monet Femme Ombrelle 1886 Logo
Color - Luminance

Luminance is a photometric measure that is placed on a scale: that quantifies how a color is dark or light that goes from: 0 for darkest black to 1 for lightest white The ratio of luminance...
Monet Femme Ombrelle 1886 Logo
Color Difference / Distance

How to calculate the color differences and/or a distance between two colors ?
Monochromatic Landing
Color Theme / Scheme

A color theme / scheme is a combination of colors used in an application design. They are palette but formed from only a couple of colors. The main types of color schemes are: , , . ...
Subtractive Color Wheel
Colors - (Complementary|Opponent) Colors

Colours directly opposite to each other in a colour wheel and appears opposite in character are called complementary colours. They cancel each other out, lose hue and produces a achromatic color (grayscale...
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective
Card Puncher Data Processing
Popup

A pop-up is an overlay window that: does not require any action to show up gives extra context information. It just popup when the pointer goes over an element.
Card Puncher Data Processing
Software Design - Readability (understandable)

A text is readable when it's easy to read. Readability is also known as legibility. Good design makes a product understandable. In Cognitive_dimensions_of_notationscognitive dimension terms, an non-understandable...



Share this page:
Follow us:
Task Runner