1

I'm aware that manual selection based on human judgement will always trump a heuristic algorithm for things like this... unfortunately that's not really an option. :)

So given a certain background colour, how might an algorithm go about determining whether white text is poor choice to overlay (the alternative would be black)? For example, white text on #F44444 is perfectly readable, but white text on #FBBBBB is a struggle!

I imagine it will involve something to do with representing the colour in a model like HSL? And then checking whether the saturation and/or lightness match certain conditions?

  • You are using HEX notation and white text which suggests you are not interested in print. Also, you do not mention any coloured text. Will you be using any other value for text than white or black; a dark grey for some aesthetic consideration, say? – Stan Sep 1 '17 at 15:19
  • Yes that's correct, I'm only thinking digitally (assuming by "print" you mean the ink and paper type... I'm not a graphic designer so maybe it's some other terminology haha). And while I did just have white vs black in mind, I suppose if it didn't add too much extra complexity I could think about different shades of grey as well (although I didn't mean pure black anyway - like most "black" text, it would actually be a very dark grey). – clb Sep 1 '17 at 15:25
  • Have you looked at the freeware (Creative Commons) "Colour Contrast Analyser" found at www.visionaustralia.org/digital-access-cca? – Stan Sep 1 '17 at 15:37
  • Almost all systems used today to view Web content assume sRGB encoding. – Stan Sep 1 '17 at 16:48
1

A lot of your work is already done for you if not all.

The World Wide Web Consortium (w3) publishes Web Content Accessibility Guidelines. Their recommendations define three different levels of colour contrast conformance depending on text size and relevancy. A Colour-Contrast-Analyzer is provided for this purpose.

It recommends:
Contrast (Minimum): The visual presentation of text has a contrast ratio of at least 4.5:1, except for Large Text (18pt.+) at least 3:1

contrast ratio (from w3.org/TR/WCAG20/#contrast-ratiodef)

(L1 + 0.05) / (L2 + 0.05), where

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

relative luminance (from w3.org/TR/WCAG20/#relativeluminancedef)

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white

Note: For the sRGB colorspace, the relative luminance of a color is defined as
L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G and B are defined as:

  • if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

  • if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

  • if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

  • RsRGB = R8bit/255

  • GsRGB = G8bit/255

  • BsRGB = B8bit/255

The "^" character is the exponentiation operator. (Formula taken from [sRGB] and [IEC-4WD]).

The w3 recommendations define three levels of conformance to their guidelines. Priority 1, 2 and 3. Their 2.0 color contrast algorithms utilizes two of these-- Priority 2 (AA), and Priority 3 (AAA). Whether or not you need to reach an AAA conformance depends on your target audience. Read more about this on the w3 site. For large text (over 18 points) the contrast ratio for AA is 3:1 and for AAA 5:1. For small text it's 5:1 for AA and 7:1 for AAA.

More information regarding accessibility and conformance can be found:
Web Content Accessibility Guidelines 2.0

More information regarding Contrast (Minimum); specifically, understanding guidelines SC 1.4.3 Visual Presentation of text and images of text… can be found:
Understanding SC 1.4.3

0

My approach would be to fist convert the background color to its grayscale equivalent. If the brightness value (on a scale from 0-100%) of that is "too close" to white, the text color should change to black. "Too close" is somewhat subjective, but I would start testing with 65% brightness to trigger the switch to black text. White text should be legible on a background color with a converted brightness value darker than that. Good luck!

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.