Did you know that a school poster can be attractive, colourful and nearly impossible to read? A pale-grey deadline on white may look elegant on the designer’s bright laptop but disappear on a classroom projector. The design question is not merely ‘Do I like the colours?’ It is whether someone unfamiliar with the poster can identify the important information without strain or guesswork.
Text contrast is the difference in relative luminance between letters and the background behind them, expressed as a ratio. For ordinary digital text, WCAG 2.2 Level AA specifies at least 4.5:1; for qualifying large-scale text the minimum is 3:1. The immediate answer is to check the actual colour pair, calculate the ratio without rounding a failing value into a pass, and test the complete design at its real display size. WCAG is a web standard, not automatic certification of a printed notice; it makes a useful educational benchmark.
- Identify essential text: venue, date, time, required action and safety information.
- Identify the precise foreground and background colours, not the overall poster palette.
- Use a WCAG-compliant contrast checker and record the measured ratio.
- Apply 4.5:1 to ordinary text and 3:1 only to text meeting the standard’s large-text definition.
- Inspect words over gradients and photographs locally, not just the average background colour.
- Check size, font weight, projection, reading order and whether colour is the sole cue.
The difference between an appealing colour and a usable instruction
Imagine an invented poster for a school science exhibition. The illustration is beautiful and the heading stands out. The room number is tiny, however, and has almost the same lightness as the paper. A visitor can admire the poster but not use it. A teacher should ask the learner to explain which words must be noticed first, which must remain legible at a distance, and what evidence proves their choices work.
Colour contrast is not simply the difference between names of colours. Red and green can be visually distinct yet have similar luminance. Two shades of grey can differ just enough to cross a measurable accessibility threshold. A contrast checker addresses the second issue; a clear label or symbol alongside colour addresses the first. These are different problems and require different corrections.
What the contrast ratio actually measures
WCAG computes the ratio as (Lighter relative luminance + 0.05) ÷ (Darker relative luminance + 0.05). Relative luminance is determined by a standard calculation from RGB values. Maximum contrast is 21:1 for pure black and white. Identical colours yield 1:1. The ratio tells you about the specified colour pair, not whether every person will read your poster easily.
Normal-sized digital text uses the 4.5:1 Level AA criterion. Qualifying large text uses a lower minimum, 3:1. The standard generally identifies large text as at least 18 pt regular or 14 pt bold, subject to the defined typographic interpretation. Do not treat every heading as automatically ‘large’, and do not assume paper printing has exactly the same viewing conditions as a screen.
Worked example: the colour change that crosses the threshold
Illustrative student poster, not a real pupil submission: a date is printed in #777777 grey on #FFFFFF white. The hexadecimal code #777777 means each red, green and blue channel has value 119 on a 0–255 scale. Dividing gives 119/255 ≈ 0.46667. Applying the standard sRGB luminance transformation gives approximately 0.1845 for this neutral grey, compared with 1 for white.
- Identify the lighter colour: white, relative luminance 1.0000.
- Identify the darker colour: #777777 grey, relative luminance approximately 0.1845.
- Apply the equation: (1 + 0.05) ÷ (0.1845 + 0.05) ≈ 4.48:1.
- For ordinary-size digital text this is below 4.5:1; it does not pass simply because the result is close.
- Change the grey to #666666. Its relative luminance is approximately 0.1329, giving 1.05 ÷ 0.1829 ≈ 5.74:1. This clears the normal-text threshold.
The number 4.48 must not be rounded to 4.5 and declared a pass. The standard’s threshold concerns the actual computed value. This makes a good mathematical lesson about inequalities: 4.48 is less than 4.5 even when a casual one-decimal display would hide the difference. The improvement to #666666 shows how changing one design choice can produce a defensible, measurable result.
A separate mental check uses black and white. Because black has luminance 0 and white has luminance 1, the equation gives (1.05)/(0.05) = 21:1. A learner who gets 1:21 or 0.05 should inspect which value belongs on top. This independent benchmark is a useful way to notice an inverted fraction.
What the calculation cannot tell you
A passing pair does not certify a whole school poster. Text over an image may have a different contrast under every word. A translucent overlay changes the colours seen by the reader. Glare, printing quality, small type, tight line spacing, visual clutter and poor wording may all prevent someone from finding the instructions, even when a sampled colour pair passes.
The lower 3:1 threshold for qualifying large text should not become an excuse to shrink an important date or use barely visible type. Some graphics and non-text components have different accessibility considerations. WCAG also defines exceptions for certain incidental text and logos; practical venue details are not decorative. Design for the reader’s task, not for a loophole.
Diagnose what the learner misunderstood
Show three versions of an invented event notice. One has a strong title but an invisible time. Another has sufficient measured contrast but very small letters. A third has readable text on a solid panel and unreadable lettering over a photograph. Ask the pupil which fault appears in each and why. The diagnosis matters because an arithmetic lesson will not repair a layout problem, and a colour change will not repair unclear words.
- If the learner checks only the headline, ask them to locate the event’s actionable details.
- If they pick by colour name, introduce luminance and use greyscale comparison.
- If they treat 4.48:1 as a pass, revisit numerical thresholds without rounding.
- If they use the large-text exception for body copy, inspect the actual font size and weight.
- If they trust the checker alone, test real reading distance and background variation.
From guided design to independent checking
Practice 1: find the message before choosing colours
Give the student a fictional invitation containing a date, time, location and registration instruction. Ask them to underline each item. They should be able to state the intended reader’s next action. Only then should they arrange the text. This prevents a visually dominant illustration from taking priority over the message.
Practice 2: predict and measure
Present black on white, #777777 on white and #666666 on white. Learners predict the strongest and weakest contrasts, then check the exact figures using a calculator. Have them write ‘foreground; background; ratio; text category; judgement’ as one complete record. The method is transferable to new colour pairs.
Practice 3: repair a border case
Use the 4.48:1 example and require an edit that clears 4.5:1 while preserving the poster’s layout. The learner may darken text or alter the background. Record a before-and-after ratio without pretending that a tiny numerical difference establishes overall accessibility. Ask why the corrected design is easier to verify.
Practice 4: deal with changing backgrounds
Place text across a fictional photograph with bright sky above dark trees. Students discover that a single average background value misses local failures. They can move the words onto a solid block and test that block’s final composited colours. This stage turns one-dimensional arithmetic into actual design reasoning.
Practice 5: transfer to unfamiliar work
Give the learner a new poster unrelated to the class example and ask for a one-page audit: two essential text elements, measured contrast ratios, one documented correction and a real-size readability check. The pupil should explain the change to someone who has not seen the earlier example. That explanation is stronger evidence of learning than memorising #666666.
Common misconceptions
- ‘Bright colours are always more readable.’ The relative luminance contrast with the background is what is measured.
- ‘This heading is large because it looks important.’ WCAG has defined size criteria.
- ‘The whole poster passes because one pair passed.’ Every meaningful text location may need checking.
- ‘A colour contrast ratio proves accessibility.’ Reading order, size, alternative text and user testing remain important.
- ‘Colour can carry instructions by itself.’ Provide labels or shapes too when readers must distinguish categories.
What parents and teachers can observe
A parent can ask a child to show the poster on an ordinary phone and point out the date in under ten seconds. A teacher can use a classroom projector and invite a new reader to locate the venue and action. Record where they hesitate instead of awarding a score just because the colours look pleasing. This is a formative check, not a promise about examination results.
Track three things over several drafts: the number of essential text pairs checked and corrected, whether readers find the right detail without prompting, and whether the student can explain a change using evidence. Separate failures of contrast from failures of wording or hierarchy. Progress means fewer inaccessible details and more reliable independent checking.
Limits and authoritative reading
These ratios come from the W3C WCAG 2.2 minimum text contrast criterion and its explanatory guidance. A paper printout, school banner or classroom projector may have additional physical constraints beyond web conformance. This article is a design-learning guide, not a WCAG compliance certificate or a substitute for testing with readers.
Frequently asked questions
Is #777777 text on white close enough?
For normal-sized web text, no. The contrast is approximately 4.48:1, below the 4.5:1 minimum. Avoid rounding it upwards into a pass.
Will making text bold automatically solve contrast?
Not always. Boldness can improve visual weight, but it does not automatically change the colour ratio. The large-text exception applies only if the defined requirements are met.
Can a photograph serve as a background?
Yes, but assess the actual colour under the text, including transparency and varying image regions. A stable, sufficiently contrasting panel often helps.
If the ratio passes, is the poster accessible?
Not necessarily. Check the reader’s task, font size, reading order, non-colour cues, alternatives for images and the actual display conditions.
The core aim is usable communication
A good design decision can be explained without asking others to share the designer’s taste. The student learns to say: ‘This text carries the location; here is its contrast and how I checked it at real size.’ That habit builds an independent thinker who measures what matters, corrects mistakes and improves communication for more people.
Continue through the eduKate Education Hub, the Core Aim of Education hub and our specific local contrast assessment resource. The immutable Clementi Mathematics reference demonstrates the same teaching sequence: diagnose, explain, practise, transfer and verify.