The digital divide and accessibility

Who is shut out of technology, designing for disability, and measuring colour contrast.

F12.6Technology and societyGCSE20 min

Do this lesson in the simulator

Technology only helps the people who can actually use it. Some are shut out by cost or by where they live; others by how a product is designed. This lesson is about both, and it ends by measuring something a designer can get wrong without noticing: whether text can be read at all.

The digital divide

The digital divide is the gap between those with good access to technology and those without. It shows up:

  • by income: a family that cannot afford a laptop or home broadband;
  • by geography: rural areas and poorer countries with slow or no internet;
  • by age: people who never learned to use these tools and find them unfamiliar;
  • by disability: products that cannot be used without sight, hearing or a steady hand.

It matters because so much now assumes access: homework, job applications, banking, doctor's appointments, benefits. Someone offline is not just missing entertainment; they are missing services. Schools lending laptops, libraries offering free internet, and public Wi-Fi all exist to narrow the gap.

Accessibility

Accessibility is designing so that people with disabilities can use a product. It is also the law for public services in the UK, and it makes products better for everyone: captions help in a noisy room, and a big touch target helps when you are walking.

Need What helps
Blind or low vision screen reader support, text alternatives for images, resizable text, strong colour contrast
Deaf or hard of hearing captions and transcripts, visual alerts as well as sounds
Limited movement keyboard control for everything, large targets, no time limits
Dyslexia or reading difficulty plain language, clear fonts, good spacing, no walls of text
Colour blindness never use colour alone to carry meaning: add a label or a shape

The last one matters for the robot too: an LED that says "red for error, green for ready" tells a colour-blind user nothing on its own. Add a sound or a pattern.

Measuring contrast

Whether text can be read against its background is not a matter of opinion: it is measured. The contrast ratio between two colours runs from 1 (identical) to 21 (black on white), and the accepted standard asks for at least 4.5 for normal text.

# the two lines every program starts with: the commands, then the robot
from bugbot import *
connect()

def luminance(rgb):
    """How bright a colour looks, from 0 (black) to 1 (white)."""
    out = []
    for value in rgb:
        v = value / 255
        out.append(v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4)
    return 0.2126 * out[0] + 0.7152 * out[1] + 0.0722 * out[2]

def contrast(a, b):
    la, lb = luminance(a), luminance(b)
    lighter, darker = max(la, lb), min(la, lb)
    return (lighter + 0.05) / (darker + 0.05)

print("black on white:", round(contrast((0, 0, 0), (255, 255, 255)), 1))
print("grey on white: ", round(contrast((150, 150, 150), (255, 255, 255)), 1))

Run this in the simulator

Grey on white looks fine to a designer with good eyesight on a bright screen. Measured, it fails, and it disappears in sunlight or for a reader with low vision.

Task: check the contrast

Using the provided luminance, write contrast(a, b) returning the contrast ratio of two colours. For each (name, foreground, background) in pairs, print <name>: <ratio> pass if the ratio is 4.5 or more, or <name>: <ratio> FAIL if not, with the ratio rounded to 1 decimal place. At the end print failed: <n>, and set the LED to the foreground colour of the first pair that passes.

# the two lines every program starts with: the commands, then the robot
from bugbot import *
connect()

def luminance(rgb):
    """How bright a colour looks, from 0 (black) to 1 (white)."""
    out = []
    for value in rgb:
        v = value / 255
        out.append(v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4)
    return 0.2126 * out[0] + 0.7152 * out[1] + 0.0722 * out[2]

# name, foreground, background
pairs = [
    ("grey on white", (150, 150, 150), (255, 255, 255)),
    ("navy on white", (0, 40, 120), (255, 255, 255)),
    ("yellow on white", (255, 220, 0), (255, 255, 255)),
    ("white on navy", (255, 255, 255), (0, 40, 120)),
]

Challenges

  1. Large text only needs 3.0. Which pairs pass at that level?
  2. Why is "the error is shown in red" a problem, and what would you add?
  3. Name three things a school could do about the digital divide for its own students.