TI-84 Plus CE Python and Numworks Python: Color Contrast
Introduction and Calculation
The following Python script compares a contrast of colored text (foreground) color against a background color. It is important to have good, high contrast. High contrast allows for easy readability and it's easier on the eyes. This becomes more important when considering web page development to allow accessibility.
Steps:
1. Get the RGB color code for the background color. Here the decimal values of 0-255 are used. R is red, G is green, and B is blue. Black has all three entered as 0. White has all three values entered as 255.
2. Take the ratio of each color out of 255 as such:
x = x ÷ 255
Where x stands for R, G, and B. Do this for each color. We want to the decimal answer, not the percentage.
3. For each color (R, G, B), do this calculation:
If x ≤ 0.03928
Then x = x ÷ 12.92
Else x = ((x + 0.055) ÷ 1.055)^2.4
Again, x stands for R, G, and B. Do this for each color.
4. Calculate the luminosity as:
L = 0.02126 * R + 0.7152 * G + 0.0722 * B
Let l1 = L (background color).
5. Do steps 1-4 for the text color. Let l2 = L (text color).
6. Set the light color as the maximum between the background color and text color. Set the dark color as the minimum between the background color and text color. The contrast is calculated as follows:
c = (light + 0.05) ÷ (dark + 0.05)
If c = 21, you have perfect contrast. If c = 1, you have the worst contrast. Hence, we want as high contrast as possible. This is one measure of how good colors compare to each other.
The script presented is for the TI-84 Plus CE Python (and TI-83 CE Premium Python Edition) and Numworks. There are slight differences between the scripts, which will be highlighted in each section.
TI-84 Plus CE Python script: CNTRST84.py
Notes:
The Texas Instruments version uses the following modules: math, ti_system, and ti_draw.
The ti_system has the wait_key() command, which allows us to stop the program execution until a key is pressed.
Code:
from math import *
from ti_system import *
from ti_draw import *
# 2023-08-12 EWS
# Contrast - TI-84 Plus CE Python Version
# Source:
# www.w3.org, "WCAG 2.0"
# ADG*, "How to calculate colour contrast"
# CODE:
# subs
def lumin(r,g,b):
r=compare(r/255)
g=compare(g/255)
b=compare(b/255)
return .2126*r+.7152*g+.0722*b
def compare(x):
if x<=.03928:
x=x/12.92
else:
x=((x+.055)/1.055)**2.4
return x
# main
print("Color Contrast \n(0-255) \nBackground color:")
r1=int(input("red? "))
g1=int(input("green? "))
b1=int(input("blue? "))
print("Text color:")
r2=int(input("red? "))
g2=int(input("green? "))
b2=int(input("blue? "))
# calc
l1=lumin(r1,g1,b1)
l2=lumin(r2,g2,b2)
cntr=(max(l1,l2)+.05)/(min(l1,l2)+.05)
print("Contrast: ",str(cntr))
# pause the screen
k=0
while k==0:
k=wait_key()
# draw
clear()
set_color(r1,g1,b1)
fill_rect(0,0,319,200)
set_color(r2,g2,b2)
draw_text(25,65,"Contrast test: TI-84+ CE")
draw_text(25,125,"Press clear to continue.")
show_draw()
Numworks script: CNTRSTNW.py
Notes:
The Nuwmorks version uses the following modules: math and kandinsky. The kandinsky module is one of the graphics modules Numworks has.
Due to a lack of a get key command, I have decided to display both the contrast and the color test as the last step. The calculated contrast will always be printed with black text on white background.
Code:
from math import *
from kandinsky import *
# 2023-08-13 EWS
# Contrast - Numworks Version
# Source:
# www.w3.org, "WCAG 2.0"
# ADG*, "How to calculate colour contrast"
# CODE:
# subs
def lumin(r,g,b):
r=compare(r/255)
g=compare(g/255)
b=compare(b/255)
return .2126*r+.7152*g+.0722*b
def compare(x):
if x<=.03928:
x=x/12.92
else:
x=((x+.055)/1.055)**2.4
return x
# main
print("Color Contrast \n(0-255) \nBackground color:")
r1=int(input("red? "))
g1=int(input("green? "))
b1=int(input("blue? "))
print("Text color:")
r2=int(input("red? "))
g2=int(input("green? "))
b2=int(input("blue? "))
# calc
l1=lumin(r1,g1,b1)
l2=lumin(r2,g2,b2)
cntr=(max(l1,l2)+.05)/(min(l1,l2)+.05)
# draw
c1=color(r1,g1,b1)
c2=color(r2,g2,b2)
cb=color(0,0,0)
cw=color(255,255,255)
fill_rect(0,0,320,240,c1)
draw_string("Contrast test: Numworks",25,25,c2,c1)
draw_string("Contrast: "+str(cntr),25,50,cb,cw)
draw_string("Press OK to continue.",25,150,c2,c1)
Sources
"How to calculate colour contrast" Accessibility Developer Guide (ADG*). An initiative of Access for all. Last Edited July 29, 2023. Accessed August 8, 2023.
https://www.accessibility-developer-guide.com/knowledge/colours-and-contrast/how-to-calculate/
"Relative Luminance" Web Content Accessibility Guidelines (WCAG) 2.0. W3C, Inc. (World Wide Web Consortium, Inc.) Last Edited December 11, 2008. Accessed August 8, 2023. https://www.w3.org/TR/WCAG20/#relativeluminancedef
Eddie
All original content copyright, © 2011-2023. Edward Shore. Unauthorized use and/or unauthorized distribution for commercial purposes without express and written permission from the author is strictly prohibited. This blog entry may be distributed for noncommercial purposes, provided that full credit is given to the author.
