1

Are there existing algorithms that can measure readability colors for text over a background? (on-screen text for e.g.).

Something which could be used (for example) for auto-generating color schemes that don't produce unreadable text.

While I wouldn't mind writing my own, it seems like something there may be existing tried & true solutions for.

A simple algorithm could calculate a readability score that would be lowered when:

  • Colors have the same "brightness".
  • Saturated colors are far apart on the color wheel
    (opposite colors or approaching opposite). Red-on-green for example.
  • De-saturated text over bright background colors might also need to be accounted for.

Further I would need to try this to see how well it works.

Are there existing methods in common use?

Improve this question

2 Answers 2

Reset to default
1

Yes, you can find this in the W3 Accessibility Recommendations under the title "Relative Luminance". The formula is as follows, but I recommend you look it up in the original link, as the text here has a strange format, so I am just including it just for reference:

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

Note 1: 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]).

Note 2: Almost all systems used today to view Web content assume sRGB encoding. Unless it is known that another color space will be used to process and display the content, authors should evaluate using sRGB colorspace. If using other color spaces, see Understanding Success Criterion 1.4.3.

Note 3: If dithering occurs after delivery, then the source color value is used. For colors that are dithered at the source, the average values of the colors that are dithered should be used (average R, average G, and average B).

Note 4: Tools are available that automatically do the calculations when testing contrast and flash.

Improve this answer
1
  • 1
    Only checking the relative luminance doesn't account for opposite (or near opposite) colors which can also be difficult to read.
    – ideasman42
    Jul 13, 2022 at 23:34
0

GitHub recently addressed this in a blog post. There are issues with the WCAG color accessibility formulas, especially with light on dark text, which their tool attempts to solve.

Improve this answer
3
  • This is a tool, Is there a reference to the algorithm used to check if text is readable on a background? (also, answers should be self contained, not linking to external links which may become invalid)
    – ideasman42
    Jul 14, 2022 at 15:05
  • 1
    @ideasman42 The tool links to it's source code, as well as a blog post explaining how it works. Perhaps further investigation of this tool could be helpful to you. Some of the further reading that blog links to discussing perceptually uniform color spaces is pretty interesting as well.
    – maxathousand
    Jul 14, 2022 at 15:37
  • An answer shouldn't link to an answer, it should be self contained. From what I can see, the link can be reduced to the answer: "Using colors that have a contrasting brightness (Luv) in HSLuv color-space has been shown to work well as a way to ensure text contrasts with it's background." That github has a tool that uses the color space is an interesting reference but not exactly an answer.
    – ideasman42
    Jul 15, 2022 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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