I have to print numbers in colored table cells so I want to choose a text color for these numbers which will make them readable against every possible cell color (the cells can be 11 different colors in my particular case). I think having a single text color would be much prettier than using different text colors for different background colors, provided all the text is still readable.
I'm using an accessibility toolbar to determine whether the colors I choose respect the Web Content Accessibility Guidelines (WCAG), Version 2.0, Level AAA minium luminosity contrast.
So the question is: How can I find this magic text color which will pass the AAA minimum luminosity contrast test for a given set of background colors? OR how can I prove this magic text color doesn't exist for the set of background colors I have (which I cannot change)?
Of course, you could find this color by trial and error (I tried and failed), but a general formula would be better.
This question is meant to be general, but here is a test page I wrote for my particular situation, just so you can try out your solutions quicker... The goal is to make all text pass the minimum luminosity contrast threshold by assigning the appropriate text color to all paragraphs (one single color for all), or to prove such a color doesn't exist somehow..
<html>
<head>
<title>Testing text colors to contrast with background colors</title>
<style type="text/css">
p { padding: 1em; color: #000; font-weight: bold; }
.color_1 { background: #99CCFF; }
.color_2 { background: #66CCFF; }
.color_3 { background: #00CCFF; }
.color_4 { background: #99CCCC; }
.color_5 { background: #999999; }
.color_6 { background: #999966; }
.color_7 { background: #996600; }
.color_8 { background: #996633; }
.color_9 { background: #993300; }
.color_10 { background: #660000; }
.color_11 { background: #ff0000; }
</style>
</head>
<body>
<p class="color_1">Text 1</p>
<p class="color_2">Text 2</p>
<p class="color_3">Text 3</p>
<p class="color_4">Text 4</p>
<p class="color_5">Text 5</p>
<p class="color_6">Text 6</p>
<p class="color_7">Text 7</p>
<p class="color_8">Text 8</p>
<p class="color_9">Text 9</p>
<p class="color_10">Text 10</p>
<p class="color_11">Text 11</p>
</body>
</html>
You can also have a look at the test page online (thanks jsFiddle!)
