1

I'm trying to investigate / create a pink color pallet. I need to know what is the lightest shade of pink that can give a contrast ratio (see WCAG) of 3:1 -- and maybe even 4.5:1 -- with white (#FFFFFF).

By playing around with color sliders, I think that shade of pink might be #FF5B73. However, I'm not 100% sure if that is indeed the lightest possible pink that achieves the contrast ratio that I need.

Also, any idea what might be the darkest shade of pink that would give the highest contrast ratio against white?

5
  • 1
    You already have a color that's pink, light and has the wanted contrast right? Why does it have to be "the lightest possible"? It's an obstacle you put before yourself. The contrast ratio is well defined mathematically. "Lightness" is a bit more fluffy as several different definitions exist. "Pink" is a word that lacks a precise mathematical definition. So how can you ever be certain to find the "correct" answer? And who can and will hold you up to it?
    – Wolff
    Nov 17, 2021 at 2:00
  • 1
    What colorspace is your monitor calibrated to?
    – joojaa
    Nov 17, 2021 at 6:46
  • 1
    IMO "pink" stops being pink at around 2:1. After that it's entering the magenta, red or fuchsia range. But then the definition of pink also varies in certain languages (eg. in german it means a darker and fully saturated color, while in english it's more of a lighter pastel kind)
    – AAGD
    Nov 17, 2021 at 7:28
  • 2
    .... really depends on how well a viewer perceives any difference. Human vision isn't standard across all humans. Not to mention various screens with various color profiles doing various things to any color..... Your choice is as good a guess as anyone else's guess.
    – Scott
    Nov 17, 2021 at 7:38
  • One trick to help you add contrast is adding a shadow. But probably that will not pass a contrast test.
    – Rafael
    Nov 18, 2021 at 4:01

1 Answer 1

2

Pink is not an exact color definition. But you can get a free or online color contrast analyzer and search a good color that you see as pink. I consider pink is pure RGB red RGB(255,0,0) (or as well #FF0000) mixed with so much white that the saturation is 50% or less and then maybe darkened. That's RGB(X,Y,Y) where X is something from 1 to 255. Minimum 1 makes it reddish. Green and blue components can be anything from 0 to X, but they must be equal (Y=0...X).

Here's an example. It's picked from Photoshop's color selector:

enter image description here

The found #BC8787 has the minimum contrast 3:1 against white.

Others can want the hue be something more blue that pure red. To find your own opinion you can adjust the hue from 360 degrees to as low as 340 degrees.

There's no actual need to use Photoshop to search the color, but it's handy because you can have the rest of the image under construction visible at the same time and see the actual color in the right context. Searching a color can well be done in color contrast analyzer only. As an advantage you can have transparency (=alpha less than the maximum). An example of the blueish variation (hue=341 degrees):

enter image description here

The HSV-system is the same polar version of RGB as Hue-saturation-brightness in Photoshop. Photoshop's brightness is often called value in other programs.

A competent mathematician would calculate the exact result, but I skip it due the lack of knowledge of contrast perception models.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.