: Algorithmic heuristic for whether white text is unsuitable for a given background I'm aware that manual selection based on human judgement will always trump a heuristic algorithm for things like

@Cofer715

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

Vote Up Vote Down

@Tiffany317

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!

Vote Up Vote Down