White letters stand directly over a bright window in a real-estate image. The large headline is just about legible; the important information beneath almost disappears. In a second graphic two offer states differ only by red and green. Both designs look coherent in the layout program. Their information is nevertheless not reliably perceivable for everyone.
This in-house workshop is aimed at editorial teams in Austria and Germany. It deals with the design of digital real-estate content and uses W3C explanations as a technical orientation. Which legal requirements apply to a specific offer is not decided here.
Name the indispensable information first
The editorial team marks which statements must arrive without puzzle: subject, amount with an unambiguous reference, necessary temporal classification and actual offer status. A decorative area may recede. A decisive qualification must not be barely visible simply because it spoils the image effect.
In the fictional example “Planungsbeispiel” (planning example) appears in very small light type while the visualisation looks like a finished house. An improvement in design therefore does not concern only the headline. The classification must also be readable on the same actual output.
The team first creates a simple text version without a photo. Which statement remains? Only with this priority are background, type and image designed together.
Colour may support a meaning, but must not carry it alone
The W3C explanation for WCAG 1.4.1 describes that colour should not be the only visual means of conveying the specified information. An additional visible distinction can be, for example, text or shape. [FARBE]
For our own graphic this means: the status is written out instead of appearing only as a red or green dot. Two data series receive comprehensible labels. Someone who perceives a colour differently should not lose the whole message.
An alternative text can be additionally necessary and helpful. However, it does not by itself resolve the question for seeing people who cannot reliably distinguish the colours used. The W3C explanation explicitly distinguishes these tasks from one another. [FARBE]
Consider contrast with the actual background
For normal text and text images WCAG 1.4.3 generally specifies a contrast ratio of at least 4,5 to 1; for the large text defined there 3 to 1, with named exceptions. [KONTRAST] That is a technical criteria framework, not a blanket seal of quality for every graphic or a universal printing standard.
The team should therefore not simply claim by feel that its brand typeface is “light enough”. The design or technical check considers the actual foreground and background colours, font size and the appropriate classification.
With text over a photo the background changes. A dark area on the left can work well while the same text on the right disappears over the sky. A separate calm text area or another crop can make the information more stable. Which solution suits the image is decided on the actual draft.
A corporate design needs usable combinations
A brand palette can contain several colours that are not suitable for small body text in every combination. As their own working method the editorial team therefore defines tested usage examples: which combination serves body text, which a large headline and which only decorative elements?
In doing so, a possible logo exception is not made into an exception for the entire advertising message. WCAG 1.4.3 treats text in logos separately. [KONTRAST] The number or necessary clarification placed beside it is not thereby also made part of the brand by mere spatial proximity to the logo.
The result is not a ban on one’s own colours. It is a more conscious division of tasks: recognisability may remain while information receives an appropriate presentation.
Check the final version as a reading situation
In the fictitious case the team exports an actual preview for the planned digital use. It checks not only the large working view but also the information in the intended format. If the image is altered or cropped, the type’s effect is reconsidered.
A different person is given a simple task: name the subject, status and the essential qualification. They should be able to explain the meaning without someone beside them translating the colours or reading aloud the missing small print.
This in-house test does not replace a full technical accessibility check. A single passed impression also does not confirm usability on all devices. But it makes concrete which statement is lost in the actual material.
Conclude with a comprehensible design specification
In the example the photo remains large, but the essential texts receive a calm background and a more legible hierarchy. The status appears in addition to the colour signal as a word in the visual. The output still looks like the same brand but explains itself more reliably.
The editorial team records which combination and version were considered. Later images do not blindly adopt an arbitrary type colour over each new photo. In this way readability becomes a designed property of the information and not a hope for an especially good screen.