A focus indicator can look large while only a small part of it visibly changes when keyboard focus arrives. Measuring its outer rectangle alone can therefore give the wrong answer. The useful question is how much qualifying indicator area changes sufficiently between the unfocused and focused states.
The short answer is to keep two measurements together: an area budget tied to the control, and a contrast comparison at the same locations before and after focus. This guide builds original rectangle, ring and colour examples, then changes their dimensions and backgrounds to test whether the reasoning transfers.
This is a specialist branch of Universal Design. All controls, dimensions and luminances below are fictional teaching models. They explain calculations rather than certify an interface. A real evaluation must establish the relevant component, states, rendering and applicable requirements.
eduKateSG · Universal Design
Find your next learning step
Compare the same locations before and after focus, count qualifying area and test a changed layout.
ROUTE 1 · CHAPTERS 1–5
Separate the two measurements
Define component, reference area and state contrast.
ROUTE 3 · CHAPTERS 11–16
Challenge the design assumptions
Change backgrounds, dimensions and coordinate scale.
ROUTE 4 · CHAPTERS 17–22
Build and repair evidence
Record actual regions and solve changed geometries.
ROUTE 5 · CHAPTERS 23–28
Transfer and continue
Check unions, colour branches, margins and learner routes.
Chapter contents
Separate the two measurements · Chapters 1–5
1. Begin with the control someone must find
2. State the requirement and its scope accurately
3. Derive the rectangular reference area
Work the area budget · Chapters 6–10
6. Calculate a complete outside band
7. Count only the area that qualifies
8. Inspect two bands without adding the wrong parts
Challenge the design assumptions · Chapters 11–16
11. Understand the limited two-colour guarantee
12. Break the guarantee with a changed background
13. Change the button size and rebuild the budget
14. Preserve the coordinate scale
Build and repair evidence · Chapters 17–22
17. Turn a gradient into a qualifying-region problem
18. Keep obscuration and operation as separate checks
19. Build a record another reviewer can follow
20. Repair the smallest broken relationship
Transfer and continue · Chapters 23–28
23. Combine separate indicator regions without double counting
24. Find a colour that works against two supplied surfaces
25. Test a margin against stated measurement bounds
26. Choose a learner route with visible progress
CHAPTER 1 OF 28 · Separate the two measurements
1. Begin with the control someone must find
Imagine a learner booking a workshop using a keyboard. The next key press will activate whichever control currently has focus. A visible indicator helps the learner locate that control before acting. A pointer hovering elsewhere cannot substitute for that information because pointer position and keyboard focus need not coincide.
Our main example is a rectangular booking button with an unfocused visible width of 120 CSS pixels and height of 36 CSS pixels. Its label, function and dimensions remain fixed while focus changes. We will add a rectangular indicator outside it. This deliberate simplicity lets us investigate area without simultaneously solving a moving-layout problem.
First identify the action and the control. Then describe the change. Saying that a screenshot contains a dark rectangle is incomplete: it might be a permanent border, a selected state, a container or the actual focus indicator. The comparison must establish which visual information appears or changes because this particular control receives keyboard focus.
CHAPTER 2 OF 28 · Separate the two measurements
2. State the requirement and its scope accurately
WCAG 2.2, Success Criterion 2.4.13 is a Level AAA focus-appearance criterion. In its main requirement, qualifying indicator area must reach the area of a two-CSS-pixel perimeter of the unfocused component or subcomponent, with at least 3:1 contrast between the same pixels in its two states. The criterion also specifies exceptions for certain user-agent-controlled or unmodified default presentations.
For our authored teaching indicators, we will calculate the main requirement rather than assume an exception. That choice is a modelling boundary, not a finding about an actual browser default. An exception needs evidence about what the author can adjust and what has been modified.
Keep the level and the criterion number visible in a real report. This particular AAA area calculation is not a substitute for the separate checks concerning visible focus, adjacent contrast, keyboard operation or obscuration. A favourable result for one property does not establish a complete accessibility result for the task.
CHAPTER 3 OF 28 · Separate the two measurements
3. Derive the rectangular reference area
For an ideal rectangle of width w and height h, imagine a two-pixel band centred on its boundary. The outer rectangle has dimensions w + 2 and h + 2; the inner rectangle has dimensions w − 2 and h − 2. Subtracting gives reference area 4w + 4h.
For our 120-by-36 button, that is 4 × 120 + 4 × 36 = 624 square CSS pixels. The units matter. Width and perimeter are lengths, while this reference is an area. Comparing 624 with a line thickness of two would compare different kinds of quantity.
This construction is a convenient idealised area calculation. It is not an instruction that an actual CSS border must occupy precisely that centred band. W3C’s focus-appearance explanation discusses accepted perimeter presentations and their interpretation. We use outside rectangular bands for the worked comparisons, avoiding an unsupported inference about every inward border from one algebraic diagram.
CHAPTER 4 OF 28 · Separate the two measurements
4. Compare the same locations across states
Suppose an indicator location is white before focus, with relative luminance one, and becomes dark with relative luminance 0.10. The contrast calculation is (1 + 0.05)/(0.10 + 0.05) = 7. This location changes by 7:1 in the stated model.
At another location, the unfocused luminance is 0.20 and the focused luminance is 0.10. The ratio is 0.25/0.15, about 1.67. It does not reach three. Both locations have the same final dark colour, yet they make different contributions to the qualifying area because their starting colours differ.
The WCAG contrast-ratio definition places the lighter luminance in the numerator and adds 0.05 to both terms. Our examples supply luminances directly. They are not raw red, green and blue channel numbers, and an encoded colour value should not be substituted into the luminance slot without the appropriate colour conversion.
CHAPTER 5 OF 28 · Separate the two measurements
5. Separate change contrast from adjacent contrast
A before-and-after comparison asks what happened at one location. An adjacent comparison asks whether neighbouring colours can be distinguished in the focused state. Draw two separate arrows on a paper example: one through time and one across space. They answer different questions even when the arithmetic uses the same contrast formula.
Consider an existing dark border of luminance 0.05 becoming slightly lighter at 0.10, beside a white page. Its focused appearance contrasts with white by seven, but its own state change is only 0.15/0.10 = 1.5. A strong final boundary has not demonstrated a strong change at that location.
Now let a black border become luminance 0.80 beside white. The temporal change is seventeen, while its focused contrast with the white neighbour is 1.05/0.85, about 1.24. This reverses the problem. The Non-text Contrast guidance provides the related adjacent-colour context. Record both results rather than borrowing the successful number from one comparison to answer the other.
Add a solid band of thickness t immediately outside our button. Its outer dimensions are w + 2t and h + 2t. Subtract the unchanged button area wh to obtain band area 2t(w + h) + 4t².
With t = 2, the outer rectangle is 124 by 40. Its area is 4,960, while the button area is 4,320. Their difference is 640 square CSS pixels. If this whole band provides qualifying change contrast, it exceeds the reference area 624 by sixteen.
The small surplus is understandable: an outside band includes extra corner area compared with the centred reference construction. We have not enlarged the button’s action region or claimed that the indicator itself is clickable. The indicator area and the pointer target are separate regions with separate jobs.
With a one-pixel outside band, the area is 122 × 38 − 120 × 36 = 316. High contrast alone cannot turn that 316 into 624. The arithmetic exposes an area shortage under this explicitly defined band model.
Suppose the two-pixel outside band still occupies 640 square pixels, but different background patches mean only 70% achieves the required change contrast. The qualifying area is 0.70 × 640 = 448. The remaining 192 belongs to the visible decoration but does not contribute to this particular budget.
A reviewer who measures only the whole band reports 640 and misses the shortage. Another reviewer who averages the contrast of the good and poor patches may also miss it. The needed quantity is the area of locations satisfying the comparison, not the average darkness of the indicator.
For this band to contribute 624, the qualifying fraction must be at least 624/640 = 0.975. That is 97.5% in this fictional arrangement. It is not a universal percentage requirement: a larger indicator would have a different necessary fraction. Keep the absolute reference area and the actual qualifying area in the record so the percentage cannot drift away from its denominator.
CHAPTER 8 OF 28 · Work the area budget
8. Inspect two bands without adding the wrong parts
Place two one-pixel bands around the button. The first occupies the immediate outside band of area 316. The second sits around the first, with inner dimensions 122 by 38 and outer dimensions 124 by 40. Its area is 324. Together they occupy 640.
If only the outer band changes sufficiently, the qualifying area is 324, not 640. Counting both bands because their combined thickness is two would include locations that failed the contrast comparison. The area budget follows the qualifying colours at their actual locations.
Now use two bands that are each two pixels thick. The inner band has area 640. The next band has inner dimensions 124 by 40 and outer dimensions 128 by 44, giving area 672. Either one alone exceeds 624 if its complete area qualifies.
This comparison explains why the sizes of individual colour regions matter. A two-colour appearance is not one undifferentiated area. Assign each region its geometry and its before-and-after comparison before combining any results.
An indicator can be investigated through its area even when its shape is not a complete ring. For a simple original model, place a separate horizontal rectangular bar outside the button, 120 pixels long and six pixels high. Its area is 720. If all of it qualifies and functions as a visible focus indicator, the area exceeds 624.
A four-pixel bar of the same length occupies 480 and falls short. Solving 120t ≥ 624 gives t ≥ 5.2 in this idealised continuous geometry. A practical design would need a clear, robust presentation rather than rely on a finely balanced theoretical boundary.
The bar must still be identifiable as the focus indicator for the control. A large dark panel elsewhere on the page cannot be recruited into the budget simply because it changes during the same interaction. We are measuring an indicator, not every changing pixel on the screen. Geometry supplies a useful quantitative test after the visual relationship has been established.
CHAPTER 10 OF 28 · Work the area budget
10. Compare the original alternatives in one account
Read this table with the same 120-by-36 component and reference area 624 throughout. Assume the indicated regions are visible, unobscured and genuinely identify keyboard focus. The final column addresses only the stated area-and-change calculation.
| Teaching indicator | Total indicator area | Qualifying area | Comparison with 624 |
|---|---|---|---|
| One-pixel outside band, all qualifying | 316 | 316 | Below |
| Two-pixel outside band, all qualifying | 640 | 640 | Above |
| Two-pixel band, 70% qualifying | 640 | 448 | Below |
| Two one-pixel bands, outer one qualifying | 640 | 324 | Below |
| Full-width six-pixel bar, all qualifying | 720 | 720 | Above |
A useful explanation should reconstruct at least one row without relying on the table. For the two-band case, subtract 122 × 38 from 124 × 40 to obtain 324. This independently identifies the outer region rather than treating half the total as an exact shortcut.
The table does not rank whole interfaces. A passing local area comparison leaves questions about adjacent contrast, operation, association, exceptions and actual user experience. Those questions belong alongside the arithmetic rather than being erased by its neatness.
CHAPTER 11 OF 28 · Challenge the design assumptions
11. Understand the limited two-colour guarantee
W3C’s two-colour focus technique C40 describes using sufficiently contrasting light and dark bands over one solid background. Its conditions matter: the guarantee concerns that shared background, with adequate size for each band. A changing image or a band drawn across different surfaces needs further examination.
We can understand a special black-and-white case directly. For background luminance L, black-to-background contrast is (L + 0.05)/0.05. White-to-background contrast is 1.05/(L + 0.05). Multiplying the two gives 21, independent of L.
If both were less than three, their product would be less than nine. That contradicts 21. Indeed at least one is at least √21, approximately 4.58. This is an original algebraic check of the shared-solid-background model, not a claim that each colour always contrasts sufficiently. The band supplying the useful contrast may switch when the background changes, which is why each band needs an adequate area of its own.
CHAPTER 12 OF 28 · Challenge the design assumptions
12. Break the guarantee with a changed background
Now put the black band over a black patch and the white band over a white patch. Both local state changes can have ratio one. The fact that black and white contrast strongly with each other does not rescue their separate comparisons with different underlying colours.
The earlier multiplication used the same L in both factors. In this changed construction, the two denominators and numerators no longer share that one variable. Cancelling them would be an algebraic error disguised as a design rule.
A learner can make this visible using two strips of paper, one black and one white, over matching patches. Then move both over a single grey sheet. The experiment concerns a simplified colour relationship rather than a clinical vision test or a complete rendering evaluation.
For a real indicator crossing an image, keep the actual locations in the evidence. A common background name such as hero photograph does not mean those locations share one luminance. The local comparisons determine which parts can contribute to the measured change area.
CHAPTER 13 OF 28 · Challenge the design assumptions
13. Change the button size and rebuild the budget
Replace the button with a wider 200-by-40 control while keeping the six-pixel bar at its old length of 120. The new reference area is 4(200 + 40) = 960. The old bar still contributes only 720, so its previous result does not transfer.
If the bar grows with the new width, its area becomes 200 × 6 = 1,200. That clears the new area reference under the same qualifying-contrast assumption. The important change is not the label wider screen; it is the relationship between indicator geometry and component geometry.
A complete two-pixel outside band also scales with the control. Its area becomes 204 × 44 − 200 × 40 = 976, sixteen above the new reference. That constant surplus follows from the square-corner outside-band formula with t fixed at two.
Do the changed calculation before deciding whether a reusable component style is robust. Responsive layout can alter the control’s visible dimensions while leaving a decoration’s fixed dimensions unchanged. A shared style name does not guarantee a shared area relationship.
CHAPTER 14 OF 28 · Challenge the design assumptions
14. Preserve the coordinate scale
Our lengths are CSS pixels and our areas are square CSS pixels. A screenshot might contain more image pixels because of device density, zoom or capture scaling. It is unsafe to measure an area in the screenshot’s units and compare it directly with a CSS-area threshold without establishing the relationship.
In a simple uniform capture model with scale factor s image pixels per CSS pixel, lengths multiply by s and areas by s². At s = 2, the 640-square-CSS-pixel outside band occupies 2,560 image-square-pixels. Dividing by two returns 1,280, which is still wrong; the appropriate area conversion divides by four.
This calculation does not establish that every screenshot is uniformly scaled. Cropping, resizing and browser presentation need their own provenance. The useful habit is to record which coordinate system supplied each number.
If the scale is unknown, the screenshot can still help another reviewer understand the observed state. It cannot justify a precise area conclusion merely because an image editor reports a large pixel count.
CHAPTER 15 OF 28 · Challenge the design assumptions
15. Keep the reference component stable
Suppose a button becomes wider when focused because a border participates in layout. The before and after screenshots now differ in geometry as well as colour. Comparing arbitrary matching image coordinates can mix the indicator change with shifted text or background.
Our earlier examples held geometry fixed so that the same locations had a clear interpretation. A real design that moves needs a more careful record of the unfocused component and the focus-indicator region. The reference area should not silently switch to a conveniently smaller shape after focus.
Likewise, a glow outside a component is not automatically part of the component used to set the reference. Identify the visible component boundary and distinguish it from decorative effects. Complex widgets can require identifying a relevant subcomponent rather than treating the entire surrounding panel as one control.
For learning, return to the fixed rectangle when these distinctions become tangled. First explain one stable indicator comparison. Then add a size change and state exactly which earlier assumption has been removed. Increasing complexity one condition at a time makes the resulting disagreement easier to diagnose.
CHAPTER 16 OF 28 · Challenge the design assumptions
16. Do not round a borderline colour into success
Let the unfocused location be white. To obtain a ratio of at least three against focused luminance F, solve 1.05/(F + 0.05) ≥ 3. Rearranging gives F ≤ 0.30. Equality gives exactly three in the supplied luminance model.
If F = 0.3001, the ratio is about 2.99914. A display rounded to 3.00 would conceal that the unrounded calculation is below three. Rounding a report is different from rounding the value used for a threshold comparison.
The distinction is useful even when a design should sensibly allow more margin. A stronger design goal does not justify an inaccurate boundary calculation, and an exact theoretical boundary does not justify claiming robustness to unknown rendering changes.
Record the underlying colours, conversion method and unrounded comparison where they affect a conclusion. If a tool prints only a rounded ratio, find out what it actually used for its classification. Decimal presentation is part of the evidence chain, not a substitute for it.
CHAPTER 17 OF 28 · Build and repair evidence
17. Turn a gradient into a qualifying-region problem
Consider a fictional 120-by-8 bar whose change contrast varies across its height. Suppose the lower five pixels of height qualify and the upper three do not. With uniform width and the stipulated rectangular regions, the qualifying area is 120 × 5 = 600, below 624.
Increasing only the faint upper region does not add qualifying area. Extending the qualifying portion to six pixels produces 720 instead. This example asks where a threshold is crossed, rather than how wide a shadow looks at a glance.
A real gradient may vary in both directions and need a more detailed description. The teaching partition is intentionally simple. We have supplied which regions qualify; we have not inferred them from a compressed illustration or an assumed linear relationship between encoded colour values and luminance.
When measuring such an effect, preserve the source colours and presentation. A decorative blur has no single meaningful thickness unless the reviewer states which boundary they are measuring. A reproducible calculation identifies the qualifying region first and only then measures its area.
CHAPTER 18 OF 28 · Build and repair evidence
18. Keep obscuration and operation as separate checks
A perfectly measured focus indicator can still be hidden by another element. Conversely, an unobscured button can have a focus treatment that changes too little. These are different failure mechanisms and need different evidence.
The existing guide on keyboard focus against sticky headers and overlays works through covering regions and feasible scroll ranges. Use it when the problem concerns what another layer covers. The present area calculation assumes the indicator regions being counted are actually available to be seen.
Operation also needs direct examination. Can focus reach the control? Does the expected key activate the intended action? Does the indicator persist through the relevant interaction state? An image of a focus style alone cannot answer those questions.
A practical repair record can therefore have several independent observations for the same control. Keeping them distinct helps the team fix the relevant relationship: colour and area for one problem, stacking or scrolling for another, and interaction behaviour for a third.
CHAPTER 19 OF 28 · Build and repair evidence
19. Build a record another reviewer can follow
Begin with the page, task, control and state transition. Identify the unfocused component dimensions, how they were obtained, and whether a component or subcomponent supplies the reference. Record the browser and relevant display conditions rather than implying a universal observation.
Next describe the indicator regions. For our main example that means the inner and outer dimensions of an outside ring, the luminances at corresponding locations, and any portions excluded from the qualifying area. Include the arithmetic and the exact comparison with 624.
Then state the scope of the result. A suitable teaching conclusion is that the stipulated 640-square-pixel band exceeds the 624 reference when its entire area has sufficient change contrast. An unsuitable conclusion is that the booking service is accessible because this one band passed a calculation.
For implementation evaluation, Digital Accessibility Testing Services provides the broader evidence route. The numerical example here supplies a reconstructible local reasoning task within that larger kind of investigation.
CHAPTER 20 OF 28 · Build and repair evidence
20. Repair the smallest broken relationship
Suppose the review finds a 640-area band with only 448 qualifying. Making the entire control larger could increase the reference and make the shortage worse. The evidence instead points to the indicator’s colour relationship across the actual backgrounds.
Possible changes can be compared as explicit hypotheses. A more stable background may make more of the existing band qualify. A different indicator colour may improve its local change contrast. A larger qualifying region may increase area. Each proposal should identify which measured quantity it is intended to change.
After a repair, recalculate using the new state. A colour alteration can improve temporal contrast while damaging adjacent contrast or label readability. An enlarged ring can be clipped by its container. The first improvement should therefore lead into the relevant connected checks.
Accessible Website Maintenance Services develops the continuing responsibility after a release. Keep the original evidence and the changed conditions so a later reviewer can understand why the earlier result no longer answers the current question.
CHAPTER 21 OF 28 · Build and repair evidence
21. Solve an independent changed-context example
Try a new rectangular component of width 80 and height 40. Its reference area is 4(80 + 40) = 480. It receives a separate horizontal indicator bar, width 80 and height seven. A fixed background patch means only six pixels of the bar’s height achieve qualifying change contrast.
Before reading further, calculate the total bar area, qualifying area and comparison with the reference. Then let that qualifying height shrink to five without changing the overall seven-pixel decoration. Explain what changes and what remains the same.
The total bar occupies 560 square CSS pixels. The six-pixel qualifying region occupies 480, exactly meeting the stated area comparison. With five qualifying pixels it occupies 400 and falls short by eighty. The unchanged outer size has concealed a changed result.
For a further variation, widen the component to 100 while leaving the bar at width 80 and its qualifying height at six. The reference becomes 560, but qualifying area remains 480. The learner must rebuild the reference from the changed component rather than copy the first answer.
CHAPTER 22 OF 28 · Build and repair evidence
22. Check an offset ring by subtraction
Return to the 120-by-36 button, but leave a two-pixel gap before drawing a two-pixel outside ring. The ring’s inner rectangle is 124 by 40. Its outer rectangle is 128 by 44. Subtracting their areas gives 672.
There is also a general expression. A gap g gives inner dimensions w + 2g and h + 2g. Adding band thickness t gives outer dimensions w + 2g + 2t and h + 2g + 2t. Their difference is 2t(w + h + 4g) + 4t².
Substituting w = 120, h = 36, g = 2 and t = 2 produces 4 × 164 + 16 = 672, agreeing with direct subtraction. That independent agreement is a useful arithmetic check.
The transparent gap is not indicator area. Counting the entire outer rectangle minus the button would include it. A picture with a large outline can therefore tempt a second kind of overcount: including unchanged empty space inside the outline. Always subtract the actual inner boundary of the band being measured.
CHAPTER 23 OF 28 · Transfer and continue
23. Combine separate indicator regions without double counting
Suppose a fictional indicator consists of two qualifying rectangular patches, each 120 by three. They overlap in a 20-by-three region. Adding their separate areas gives 720, but their union has area 720 − 60 = 660. The shared locations occur once on the screen, even though they appeared in two component calculations.
Against the original reference 624, this union exceeds the area requirement by thirty-six under the stated assumptions. Increase the shared width to forty while keeping both patches unchanged. Now the overlap is 120 and the union is only 600. Both separate patch areas are still 360, yet the combined result has changed.
A reviewer can check the result by partitioning the union into three disjoint pieces: the first patch outside the overlap, the shared region, and the second patch outside the overlap. Their areas sum to the same answer. This avoids treating overlapping design layers as separate visible locations.
Keep this example distinct from the question of which colour is actually painted where layers overlap. We stipulated a qualifying visible union. A real layered indicator needs its final painted appearance established before any geometric union is counted. Two authored declarations do not necessarily create two visible regions.
CHAPTER 24 OF 28 · Transfer and continue
24. Find a colour that works against two supplied surfaces
Consider an original exercise with an indicator colour of unknown luminance F placed over either a white surface or a dark surface of luminance 0.05. Require a change ratio of at least three for both comparisons. We are selecting one colour under these two stipulated alternatives, not solving every possible background.
Against white, the earlier inequality gives F ≤ 0.30. For contrast against the dark surface using a lighter indicator, solve (F + 0.05)/0.10 ≥ 3, giving F ≥ 0.25. The common interval is therefore 0.25 through 0.30. For F = 0.275, the respective ratios are about 3.23 and 3.25.
Change the dark surface luminance to 0.10. A lighter indicator would require F ≥ 0.40, incompatible with F ≤ 0.30 against white. But that does not finish the problem: the indicator could instead be darker than the second surface. On that branch, 0.15/(F + 0.05) ≥ 3 requires F ≤ 0. The boundary solution F = 0 is black, which contrasts three with the dark surface and twenty-one with white.
Restricting the algebra to the lighter-indicator branch would have missed that solution. Always test the assumed ordering of the two luminances. The contrast formula is symmetric in colour roles, but a rearranged inequality may have committed to one ordering. A correct answer includes the branch conditions as well as the resulting interval.
CHAPTER 25 OF 28 · Transfer and continue
25. Test a margin against stated measurement bounds
Suppose the control width is known only to lie from 119 to 121 CSS pixels and its height from 35 to 37. The rectangular reference ranges from 4(119 + 35) = 616 to 4(121 + 37) = 632. A separately measured qualifying region with a justified lower area bound of 638 exceeds even the largest reference in this stated interval model.
That is a robust comparison within the supplied bounds. If the area’s lower bound were 626, some combinations would remain unresolved: 626 exceeds 616 but does not exceed 632. Using the midpoint 624 would conceal the ambiguous boundary cases.
The bounds here are stipulated teaching inputs. An evaluator would need evidence supporting actual measurement allowances, including their units and whether the combinations can occur together. A rectangular range can be conservative if width and height are constrained jointly, and narrowing it requires information rather than preference.
This exercise separates a numerical surplus from a justified margin. The sixteen-pixel surplus in our exact outside-band example is a mathematical difference. It becomes evidence of robustness only after the relevant changes or uncertainties have been defined and compared with it.
CHAPTER 26 OF 28 · Transfer and continue
26. Choose a learner route with visible progress
For repair, use a small paper rectangle and one outside band. Ask the learner to identify the component, indicator and unchanged interior before calculating. If they report the whole outer rectangle, repair the area subtraction rather than introduce more colours immediately.
For stabilisation, keep the geometry and change which portions achieve the contrast comparison. The learner should explain why total area stays fixed while qualifying area changes. Then keep the colours and alter the control dimensions, requiring a new reference.
For extension, combine an offset ring, a patterned background and a changed capture scale. Ask which quantities are given, which require measurement and which cannot be concluded from the supplied record. A strong answer can identify missing evidence without inventing it.
The learning target is independent explanation. Someone who remembers 624 has retained one example. Someone who can derive a fresh reference, exclude nonqualifying regions and state the remaining evaluation limits can use the method in an unfamiliar design discussion.
CHAPTER 27 OF 28 · Transfer and continue
27. Answer the questions that often cause confusion
Must every focus indicator be a two-pixel outline?
The relevant requirement is framed through qualifying area and contrast. Our bar exercise shows why area can be investigated through another shape. Actual presentation must still function as a visible indicator associated with the control, and all applicable requirements remain relevant.
Can two thin colour bands be counted together?
Only regions that qualify for the relevant comparison enter that area budget. In our two-one-pixel-band example, one qualifying band supplies 324, even though both together occupy 640. A colour name or combined thickness cannot replace the local comparison.
Does passing this calculation establish Level AAA conformance?
No. It is a local calculation concerning one property in stated conditions. Complete evaluation involves other requirements, content and processes. Preserve that boundary when communicating a result.
Should I measure a source illustration pixel by pixel?
Use illustrations to understand the idea. An evaluation needs appropriate evidence of the actual implementation, including colour and scale information. Our figures are numerical teaching constructions, not screenshots offered as measurement evidence.
CHAPTER 28 OF 28 · Transfer and continue
28. Continue through connected design questions
Build the design foundation
Return to Universal Design for complete tasks, respectful participation and usable services. Continue to small pointer targets and their neighbours when the question concerns activation geometry. Pointer regions and focus indicators should not be silently treated as the same shape.
Examine colour and actual visibility
The guide on local text contrast develops a separate text-reading problem. The sticky-header and overlay guide follows coverage and scrolling. Use the question to choose the appropriate measurement.
Preserve the source and learning routes
The linked W3C standard, Understanding documents and C40 technique were checked on 25 October 2026. The standard supplies the requirements; supporting documents explain their use. Our numerical cases and transfer exercises are original. Continue through Gold Standard Education and How X Works to connect precise local checks with learning that remains useful when the setting changes.