Skip to content

Build brilliant Power BI reports with a disciplined schematicLesson 6 of 8

Colour, type and accessibility

30 min / read + practiceFree lesson

Apply semantic colour, readable typography, contrast and keyboard review.

What you'll do

Review a synthetic report's palette, type scale and keyboard path. Identify a contrast failure that a theme name cannot fix. Your output is an accessibility checklist tied to observed states, plus a list of native-render checks still needed.

Separate the report palette from site chrome

The spine's default report schematic uses a light canvas and native report typography. The academy website's dark appearance does not imply a dark Power BI theme. A dark report alternative requires its own contrast and export qualification. Preserve an approved client theme unless replacement is explicitly selected.

TokenValueMeaning
Canvas#F4F6F8Page field
Surface#FFFFFFHeader and panels
Ink#172B4DTitles, values and actual series
Secondary ink#526477Supporting text
Comparison#8A99ABPrevious-year or plan scenario
Accent#005A9CSelection, emphasis and focus
Favourable#006B5ELabelled approved positive status
Unfavourable#B33F00Labelled approved adverse status
Divider#D8E0E8Decoration only

Actual/comparison scenario colours are distinct from good/bad status. Label AC, PY, plan or forecast explicitly. Use solid actual lines and dashed comparisons where supported. This is an IBCS-inspired adaptation, not a claim of certified IBCS compliance.

Check the actual contrast

The design policy requires 4.5:1 for all report text, including large KPI values, and 3:1 for essential graphical objects and control boundaries. Test actual adjacent colours and selected states. A palette containing accessible dark text does not make every series or boundary accessible.

Comparison grey is only about 2.91:1 against white. It cannot be the sole essential line or boundary. Add a contrasting supported outline or dark markers and explicit labels, or supply an accessible native comparison table. A dashed line helps identify a scenario but does not increase contrast.

Contrast review:
Text against its actual panel: at least 4.5:1
Essential control/graphical boundary: at least 3:1
Status: text or icon as well as colour
Comparison: explicit scenario plus qualifying boundary/detail

The additional series colour #3E7CB1 is about 4.4466:1 on white and fails the text rule. Rounding it to 4.45 does not make it pass. Pale fills and decorative dividers also cannot serve as the sole control boundary.

Keep type readable

Use Segoe UI, with Arial fallback. The schematic specifies page titles at 20pt semibold, visual titles at 12pt semibold, KPI values at 28pt semibold and supporting text at 10pt. Table headers are 10pt semibold. Right-align numbers and left-align titles and labels.

Canvas pixels and font points are different units. At 96dpi, 10pt is roughly 13.3 CSS pixels. Do not shrink below 10pt to rescue a long label. Shorten the title, allocate appropriate space or change the presentation. Inspect actual font fallback, glyph clipping and export behaviour in the target host.

Walk the report without a pointer

Review title and context, header navigation and slicers, KPIs, primary analysis, supporting analysis and detail in a logical order. Decorative rails, fills and shadows should not receive keyboard stops. Test selected and focus states, Reset, drillthrough and native Back.

Give meaningful visuals concise alt text describing question, measure, unit, scope and comparison. Exact values need accessible native detail. Essential information cannot exist only on hover or in background pixels. Dynamic conclusions require qualified dynamic content rather than static alt text that becomes false after filtering.

Your expected output records monochrome, high-contrast, screen-reader and keyboard observations separately. A responsive website mock is not a mobile report qualification: Power BI needs a separately designed mobile layout. Preview theme integration and structural metadata checks cannot replace these native-host observations or establish numerical correctness.

Check your understanding

  1. Why does dashing the comparison-grey line fail to repair its contrast?
  2. Which typography choices should change before shrinking a label below 10pt?
  3. What essential information must remain available when background artwork disappears?
Colour, type and accessibility | Analytical Spine