Color Contrast Checker - Coolors (2024)

FAQs

How do you find the perfect contrast color? ›

Complementary. Two colors that are on opposite sides of the color wheel. This combination provides a high contrast and high impact color combination – together, these colors will appear brighter and more prominent.

Calculating a Contrast Ratio

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). (L1 + 0.05) / (L2 + 0.05), whereby: L1 is the relative luminance of the lighter of the colors, and. L2 is the relative luminance of the darker of the colors.

Color contrast is the difference in brightness between foreground and background colors. For accessibility purposes, aim for a 4.5:1 ratio between the foreground color (e.g. text, links, etc.) and the background color. This ratio ensures people with moderately low vision can tell the colors apart and see your content.

Color Contrast Ratios Guidance

Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.

You now can see that the maximum brightness difference is between yellow and blue. So in the case of an RGB-CMY color wheel, the maximum contrast is Blue-Yellow. But we can also consider that black and white are the most contrasting colors taking only in account brightness.

Use sufficient contrast.

Make sure that the contrast ratio between text color and background color is at least 4.5:1.

The contrast at a given frequency can be calculated in Equation 1, where I_max is the maximum intensity (usually in pixel greyscale values, if a camera is being used) and I_min is the minimum intensity: (1)% Contrast=[Imax−IminImax+Imin]×100% % Contrast = [ I max − I min I max + I min ] × 100 %

One way to check contrast and color contrast for images is to use online tools that analyze and calculate the contrast ratio between two colors or elements. For example, you can use the WebAIM Contrast Checker or the Colour Contrast Analyser to enter or select colors and see if they meet the WCAG standards.

[5.9. 4] The relationship between the luminances of an object and its immediate background. It is equal to (L₁ – L₂)/L₁ or (L₂ – L₁)/L₁ = | Δ L/L₁ | where L₁ and L₂ are the luminances of the background and object, respectively.

Red and blue: When used together, these colors can create a visual vibration effect that can make the text difficult to read. Yellow and green: These colors can create a low contrast, making it difficult to read the text. Black and navy blue: These colors can blend together, making it difficult to distinguish the text.

What is an example of color contrast? ›

Contrast is typically expressed as a ratio, where a higher number means a greater degree of contrast between the two colors. For example, white and black have a contrast ratio of 21:1 (the highest possible), while white and yellow have a contrast ratio of just 1.07:1.

Color pairings with a contrast ratio of 4.5:1 and above provide sufficient accessibility for use in normal text, large text and graphics. Color combinations with a contrast ratio of 7:1 for normal text and 4.5:1 for large text and graphics provide enhanced accessibility.

Contrast Resolution SNR = SNRCR = ΔS/N, which is based on the light-dark patch difference, provides an excellent indication of the visibility of the light and dark objects of similar contrast.

The local standard deviation 2 is computed from av and sqrav as follows: sd = sqrt( sqrav – av ), and the local contrast is given by C = sd / ( av + ε ) ( ε is added to prevent the contrast to go to infinity when av = 0, ε = 0.01).

The function R*0.2126+ G*0.7152+ B*0.0722 is said to calculate the perceived brightness (or equivalent grayscale color) for a given an RGB color. Assuming we use the interval [0,1] for all RGB values, we can calculate the following: yellow = RGB(1,1,0) => brightness=0.9278. blue = RGB(0,0,1) => brightness=0.0722.