WEBSITE COLOR ALLOCATION REVIEW Original planning examples; not measured website coverage. Page and reader task: Viewport/content state being reviewed: Dominant reading surface and exact text pair: Supporting field, purpose and phone placement: Accent, visible action label and text pair: Other text, focus, selected/error and image roles: Chosen allocation scope (sketch, not measured coverage): Contrast pairs checked and outstanding implementation checks: Change, reason and next review: ORIGINAL OPAQUE SRGB TEXT PAIRS Body on reading field: #1F2937 on #F7F3EA = 13.25536340:1; meets ordinary-text 4.5:1 threshold (decision uses unrounded result). Body on supporting panel: #1F2937 on #E2E8F0 = 11.90731604:1; meets ordinary-text 4.5:1 threshold (decision uses unrounded result). Action label on accent: #FFFFFF on #9A3412 = 7.30705198:1; meets ordinary-text 4.5:1 threshold (decision uses unrounded result). Underlined link on reading field: #9A3412 on #F7F3EA = 6.59832738:1; meets ordinary-text 4.5:1 threshold (decision uses unrounded result). Underlined link on supporting panel: #9A3412 on #E2E8F0 = 5.92728898:1; meets ordinary-text 4.5:1 threshold (decision uses unrounded result). Counterexample: white on pale gold: #FFFFFF on #E7BE64 = 1.75773592:1; below ordinary-text 4.5:1 threshold (decision uses unrounded result). SIX INVENTED CASES 1. Your article page uses a large neutral reading field. A planning sketch is 80 / 15 / 5 rather than 60 / 30 / 10. Has that difference by itself made the page inaccessible? Answer: No. The ratio is not a WCAG pass/fail rule. Check the actual content and presentation. Explanation: An area budget describes a composition choice, while WCAG text contrast compares a particular foreground with its actual background. A long article can reasonably need more quiet reading area than a short promotion. Check text pairs, information beyond color, required control/state cues and the wider implemented experience. Do not reduce useful reading space merely to make the sketch match a preferred number. Nor should a different ratio be treated as evidence that all those checks have passed. 2. A pale gold accent fills only 10% of the sketch. You place small white action-label text on #E7BE64. Does the small accent budget establish readable text? Answer: No. The computed white/pale-gold pair is below 4.5:1 for ordinary text. Explanation: Area and contrast are different calculations. The table computes this exact opaque sRGB pair, and it fails the ordinary-text threshold even though the accent is rare. Choose and check a different foreground/background pair, or use the pale color for a genuinely decorative role while keeping the action label on a checked surface. A ten-percent budget, attractive brand palette or logo exception does not exempt ordinary action-label text from its applicable requirement. 3. A supporting panel sits beside the article on desktop and stacks below it on a phone. Its share of the visible screen changes. Must you shrink the phone panel until its screenshot is exactly 30% support? Answer: No. Keep its useful content and role, then assess the phone layout itself. Explanation: The visible proportion depends on viewport width, text wrapping, scrolling position and the amount of content. Desktop and phone screenshots do not provide the same denominator. Check that the supporting heading remains clear, reading order is useful and the action and copy fit the narrower view. If the panel distracts from the main task, adjust its placement or emphasis for a concrete reason. Hiding useful instructions solely to recover a percentage does not solve that task. 4. The page’s chosen color allocation looks balanced. A form marks invalid fields only with a red border, without a visible explanation. What remains unresolved? Answer: The invalid meaning needs an additional visible cue and a useful explanation. Explanation: A pleasant distribution of brand colors cannot establish that people can understand a status communicated only through a particular hue. WCAG Use of Color addresses information beyond color. Provide visible wording that identifies the problem and connect it appropriately to the field in the implementation. A color-only marker is not repaired by changing its percentage. Check the field’s text, required boundary or state cues, and operability as separate parts of the actual component. 5. A page includes a large photograph with many colors. Your three-role planning bar shows 60 / 30 / 10. Can you publish that bar as a measurement of every visible pixel in the page? Answer: No. The bar normalizes your inputs; it has not measured the page or photograph. Explanation: The explorer knows three numbers supplied by the reader. It does not inspect a screenshot, sample image pixels or measure a rendered document. A photograph, typography, borders, nested surfaces, overlays and other states introduce more colors and overlapping geometry. State the planning scope and keep the illustration labelled as a sketch. If you need an actual area study, define the viewport, content, inclusion rules and measurement method separately before reporting a result. 6. You set weights to 80 / 20 / 0. May you remove an important link’s underline or make an action hard to find because no accent area was budgeted? Answer: No. Preserve understandable links and actions even when a decorative accent budget is zero. Explanation: The normalized bar can validly show zero for one chosen category, but it does not decide whether a control should exist or how information should be communicated. A design can use clear text, underlining and an appropriate dark/light action pair without reserving a decorative accent quota. Revisit the role assignment if your planning labels cannot describe the required component. The reader’s task and the implemented accessibility checks take priority over preserving a three-number sketch. SOURCES https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html https://www.carbondesignsystem.com/building-blocks/foundations/color/overview https://material-web.dev/theming/color/