Test Colour Contrast and Visible Keyboard Focus

This self-study workshop separates two questions that a single screenshot can easily confuse: can text be distinguished from its background, and can a keyboard user tell which link currently has focus? You will calculate two fictional text contrasts and trace focus through a two-link local fixture. The result is a small evidence sheet, not a complete accessibility certificate.

The W3C contrast explanation states a 4.5:1 minimum for ordinary text, with specified exceptions including large text. Contrast compares relative luminances using the lighter value plus 0.05 divided by the darker value plus 0.05.

Calculate the supplied fictional pairs

Assume the relative luminance values have already been calculated correctly from the intended colours. This exercise starts from those values; it does not infer luminance from a colour’s name or average its red, green and blue channels. Use a light background luminance of 0.8 and compare text luminances of 0.2 and 0.05.

The complete arithmetic answer is 0.85 divided by 0.25 for the first pair and 0.85 divided by 0.10 for the second. A larger ratio describes a greater luminance separation. It does not tell you whether the wording is understandable, the font is readable or the interface can be operated.

Now swap foreground and background while preserving each pair of luminances. The ratio is unchanged because the calculation still places the lighter luminance in the numerator. Do not place foreground automatically on top; the formula orders the values by luminance, not by their interface role.

Check a different property: visible focus

The W3C focus-visible explanation concerns a visible indicator of keyboard focus. That indicator must not disappear merely because time passes; the criterion does not prescribe one universal indicator shape.

The MDN selector reference describes :focus-visible as a focus state in which the browser determines that a visible indication is needed.

<a href="#first">First fictional section</a>
<a href="#second">Second fictional section</a>
<style>
a:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}
</style>

The local fixture uses a white background and ordinary links. Start before the first link and press Tab. Record its focused identity and visible outline. Press Tab again and repeat for the second link. Keep the focus position and the computed outline properties as observations, rather than assuming that a style rule must have matched simply because it exists in the stylesheet.

Interpret mixed results honestly

Suppose the fictional text pair reaches 8.5:1 but the keyboard trace has no visible indicator. The text result cannot compensate for that missing interaction feedback. Conversely, an obvious outline does not establish that the paragraph text meets its contrast requirement. Record the two findings on separate lines.

Another mistake is to round a value upward to cross a threshold. If a different supplied pair produced 4.49:1, displaying one decimal place as 4.5 would hide that it remains below 4.5. Keep enough precision for the decision and present rounded values only after applying the stated comparison.

For a deliberate diagnostic variant, imagine a stylesheet that removes the outline without providing another visible indicator. Predict the failed observation before altering a practice fixture. The acceptance question is whether the focused item remains visually identifiable, not whether a particular decorative border has been removed.

End with two separate conclusions: which fictional luminance pair clears the stated ordinary-text threshold, and what the local keyboard trace showed. A broader evaluation would also examine real content, additional controls, states, backgrounds and interaction contexts. This exercise does not promote its limited checks into that broader conclusion.

Questions and completion criteria

Retain the two calculations, the foreground/background swap explanation and the ordered two-link focus trace. The exercise uses only a local page and abstract luminance inputs.

This is an original INTIAU editorial self-study activity; no qualification is awarded. Institutional information is available through Courses or Contact.

View the study diagram