#!/usr/bin/perl
# textpltt.pl - Generate palette of readable text/background colors
# 2014 David Meyer <papa@sdf.org> +JMJ
#
# Source: Richard H. Hall. Color Combinations and Readability.
# Missouri University of Science and Technology.
# <http://web.mst.edu/~rhall/web_design/color_readability.html>
# accessed December 30, 2014.
sub abs {
my($a) = @_;
if ($a < 0) {return -1 * $a;}
else {return $a;}
}
sub bright {
my($r, $g, $b) = @_;
return ($r * 299 + $g * 587 + $b * 114) / 1000;
}
sub byte {
my($b) = @_;
return $b * 16 + $b;
}
sub bytesc {
my($b) = @_;
return $b == 255 ? 15 : ($b == 170 ? 10 : ($b == 85 ? 5 : $b));
}
sub colorsc {
my($r, $g, $b) = @_;
return sprintf("#%x%x%x", bytesc($r), bytesc($g), bytesc($b));
}
sub max {
my($a, $b) = @_;
if ($a < $b) {return $b;}
else {return $a;}
}
print <<EOF;
<!DOCTYPE html>
<html>
<head>
<title>Text Palette</title>
<link rel="stylesheet" type="text/css" href="/screen.css">
<style>
td {border-style:outset;}
#sitelink {width=100%;text-align:center;}
</style>
</head>
<body>
<p>
<a href="/~papa">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</p>
<h1>Text Palette</h1>
<p>Chart of readable text/background color combinations according to
<a href="http://www.w3.org">World Wide Web Consortium (W3C)</a>
guidelines.</p>
<hr>
<p>Text is the primary communication and entertainment medium in the
tildeverse. Whether we are playing at a shell or surfing hand-crafted
Web pages, the view is usually dominated by text.</p>
<p>Color is an important part of the text experience and can make
the difference between delight and pain when reading a
screen. The right colors can set a mood or theme for a program or site.
The wrong colors can cause physical discomfort and drown out the message
the text is trying to communicate. But of the 275 trillion possible
combinations of text and background color, which are the right ones?</p>
<p>The chart below was generated by a program that considers all
the text and background color combinations possible using only
the values of 0, 85, 170, and 255 for red, green, and blue
components, then outputs those combinations that meet W3C readability
guidelines (hue difference of 500 or more and brightness difference of
125 or more). There are millions of "in-between" color combinations not
considered that also meet W3C readability criteria. Some of the
combinations shown don't meet my personal standards of readability. Font
typeface and size also make a difference for readability. But
the chart at least provides a manageable set of generally adequate choices
to inspire your terminal and web page viewing pleasure.</p>
<p>Unfortunately, my favorite
<span style='color:#0a0;background-color:#000;border:1px solid #fff''>phosphor green on black</span>
combination doesn't make the W3C cut.</p>
<p>Source: Richard H. Hall. Color Combinations and Readability.
Missouri University of Science and Technology.
<a href="http://web.mst.edu/~rhall/web_design/color_readability.html"><http://web.mst.edu/~rhall/web_design/color_readability.html></a>
accessed December 30, 2014.</p>
<table>
<tr><th>BG<br/>color</th><td colspan=3>Text color<br/>Hue difference<br/>Brightness diff.</td></tr>
EOF
# $bgr, $bgg, $bgb: Background red, green, blue
# $fgr, $fgg, $fgb: Foreground red, green, blue
$bgcd_prev = "";
for $bgr (0, 85, 170, 255) {
for $bgg (0, 85, 170, 255) {
for $bgb (0, 85, 170, 255) {
for $fgr (0, 85, 170, 255) {
for $fgg (0, 85, 170, 255) {
for $fgb (0, 85, 170, 255) {
# Hue difference ...
$hd = max($fgr-$bgr, $bgr-$fgr) +
max($fgg-$bgg, $bgg-$fgg) +
max($fgb-$bgb, $bgb-$fgb);
# Brightness difference ...
$bd = abs(bright($fgr, $fgg, $fgb) -
bright($bgr, $bgg, $bgb));
# Readability ...
if ($hd >= 500 && $bd >= 125) {$read = 1;}
else {$read = 0;}
if ($read) {
$bgcd = colorsc($bgr, $bgg, $bgb);
$fgcd = colorsc($fgr, $fgg, $fgb);
if ($bgcd ne $bgcd_prev) {
print "</tr>\n<tr><th>$bgcd</th>";
$bgcd_prev = $bgcd;
}
printf("<td style='background-color:%s;color:%s'>%s<br/>%d %d</td>", $bgcd, $fgcd, $fgcd, $hd, $bd);
}
}
}
}
}
}
}
print <<EOF;
</tr></table>
<div id="sitelink" style="width=100%;text-align:center;">
<a href="/"><em>tilde.center</em></a>
</div>
</body>
</html>
EOF