
1
00:00:00,000 –> 00:00:03,960
Ah, your power BI theme isn’t a color palette, it’s the containment field.
2
00:00:03,960 –> 00:00:05,960
If it leaks, your visuals lie.
3
00:00:05,960 –> 00:00:10,640
Pure, undiluted power turned into a blur of false calm.
4
00:00:10,640 –> 00:00:16,180
Most people think brand colors are harmless, but those hues can erase alerts, hide subtotals,
5
00:00:16,180 –> 00:00:17,460
and smother context.
6
00:00:17,460 –> 00:00:18,760
You need to know this.
7
00:00:18,760 –> 00:00:23,080
Five invisible failures are burying critical signals in plain sight.
8
00:00:23,080 –> 00:00:25,160
Here’s what actually happens in how we stop it.
9
00:00:25,160 –> 00:00:31,000
I’ll expose each failure, then hand you a ruthless, pass-fail validation protocol, contrast
10
00:00:31,000 –> 00:00:37,240
gates, JSON locks, and organizational themes that force the truth to stay visible.
11
00:00:37,240 –> 00:00:38,840
Observe the anomaly.
12
00:00:38,840 –> 00:00:42,240
First, the accessibility reactor.
13
00:00:42,240 –> 00:00:46,000
The accessibility reactor, contrast for alerts, is failing.
14
00:00:46,000 –> 00:00:47,480
Now focus.
15
00:00:47,480 –> 00:00:50,360
Alerts are your sirens, and your theme is muting them.
16
00:00:50,360 –> 00:00:53,600
When contrast collapses, a red KPI becomes decorative confetti.
17
00:00:53,600 –> 00:00:57,080
No urgency, no recognition, only delayed, that’s catastrophic.
18
00:00:57,080 –> 00:00:58,880
We’re dealing with physics of perception.
19
00:00:58,880 –> 00:01:03,040
If luminance contrasts between foreground and background falls below the thresholds, the
20
00:01:03,040 –> 00:01:06,440
human eye stops resolving edges.
21
00:01:06,440 –> 00:01:10,880
The signal dissolves into the canvas, marvelous chaos if you’re an attacker, a disaster if you’re
22
00:01:10,880 –> 00:01:11,880
an analyst.
23
00:01:11,880 –> 00:01:12,880
Here’s the law.
24
00:01:12,880 –> 00:01:17,520
For text and UI labels, enforce a 4.51 contrast ratio minimum.
25
00:01:17,520 –> 00:01:21,520
For graphical marks, bars, lines, points, never under 3-1.
26
00:01:21,520 –> 00:01:26,320
And for high-risk KPI’s, aim-7-1, that’s your hardened alloy, anything weaker, and your
27
00:01:26,320 –> 00:01:27,840
alerts behave like ghosts.
28
00:01:27,840 –> 00:01:30,240
You see, Microsoft ships accessible themes.
29
00:01:30,240 –> 00:01:34,760
Good baseline, but not gospel, because your report introduces real backgrounds, layer
30
00:01:34,760 –> 00:01:38,440
effects, and images that shift perceived contrast.
31
00:01:38,440 –> 00:01:40,760
So we calibrate in the field, not in theory.
32
00:01:40,760 –> 00:01:43,360
Grab color contrast analyzer or web IM.
33
00:01:43,360 –> 00:01:48,840
Take the exact color pair that appears in your visual, foreground alert, red, background
34
00:01:48,840 –> 00:01:52,800
card gray, and test it against the actual pixel values.
35
00:01:52,800 –> 00:01:55,960
No assumptions, no, it looks fine on my monitor.
36
00:01:55,960 –> 00:01:57,320
Measure the luminance delta.
37
00:01:57,320 –> 00:01:59,920
If it flunks, we adjust the compounds.
38
00:01:59,920 –> 00:02:02,160
Everything changes when you add redundancy.
39
00:02:02,160 –> 00:02:03,360
Never color only.
40
00:02:03,360 –> 00:02:07,800
If an alert state is critical, bind an icon, an adjacent label or a pattern.
41
00:02:07,800 –> 00:02:11,920
Think of color as heat, iconography as shape, labels as density.
42
00:02:11,920 –> 00:02:16,400
One of them will carry the alert through foggy lighting, projector wash out, and color
43
00:02:16,400 –> 00:02:17,960
vision deficiency.
44
00:02:17,960 –> 00:02:23,440
Without redundancy, one drop of ambient glare, one drop, kills the signal.
45
00:02:23,440 –> 00:02:25,480
Let me show you the containment procedure.
46
00:02:25,480 –> 00:02:30,880
Step one, define alert states in your theme, Jason, not ad hoc on visuals.
47
00:02:30,880 –> 00:02:34,560
Set explicit hex values for positive warning danger.
48
00:02:34,560 –> 00:02:39,040
Lock their usage in data colors and conditional formatting palettes.
49
00:02:39,040 –> 00:02:45,080
Step two, bind alert related text to colors that exceed 4.51 on the background your theme
50
00:02:45,080 –> 00:02:46,600
actually uses.
51
00:02:46,600 –> 00:02:49,000
If your canvas is dark, your text is bright.
52
00:02:49,000 –> 00:02:54,200
If your canvas is light, your text is dark, no trendy mid-tone mush.
53
00:02:54,200 –> 00:02:57,360
Step three, enforce an icon set.
54
00:02:57,360 –> 00:03:03,720
For danger, a triangle or bolt, for warning, a hollow circle, for success, a check.
55
00:03:03,720 –> 00:03:08,880
Simple high contrast glyphs with no unnecessary outlines, but they are slippery, tool tips,
56
00:03:08,880 –> 00:03:12,920
annotations, and small labels often slip under the radar.
57
00:03:12,920 –> 00:03:17,960
This is why you enforce a flaw, no text element under 4.51, full stop.
58
00:03:17,960 –> 00:03:23,160
For line charts, if your red line and your grid are too close in luminance, the line disappears
59
00:03:23,160 –> 00:03:24,480
under motion.
60
00:03:24,480 –> 00:03:29,080
Thicken the line slightly, raise contrast, or lower the grid intensity.
61
00:03:29,080 –> 00:03:30,640
The grid is scaffolding.
62
00:03:30,640 –> 00:03:32,480
The line is the plasma.
63
00:03:32,480 –> 00:03:34,680
Don’t let the scaffolding burn the plasma.
64
00:03:34,680 –> 00:03:40,160
Microstory, last week, a finance lead swore their risk alerts weren’t firing.
65
00:03:40,160 –> 00:03:44,160
They were just in a pale red at 2.21 against a light card.
66
00:03:44,160 –> 00:03:48,480
When we flipped the alert to a darker hue and added a bold exclamation icon, reaction
67
00:03:48,480 –> 00:03:50,800
time dropped from seconds to instantaneous.
68
00:03:50,800 –> 00:03:54,120
That’s not cosmetics, that’s operational latency eliminated.
69
00:03:54,120 –> 00:03:55,240
Performance matters too.
70
00:03:55,240 –> 00:03:58,440
High contrast elements render faster to the brain.
71
00:03:58,440 –> 00:03:59,720
Cognitive load drops.
72
00:03:59,720 –> 00:04:02,120
Users scan, recognize, and decide.
73
00:04:02,120 –> 00:04:04,080
That’s throughput in your decision reactor.
74
00:04:04,080 –> 00:04:06,880
Now the pass fail protocol, no wiggle room.
75
00:04:06,880 –> 00:04:09,240
Text and UI below 4.51.
76
00:04:09,240 –> 00:04:11,520
Graphics below 301.
77
00:04:11,520 –> 00:04:12,520
Fail.
78
00:04:12,520 –> 00:04:16,920
High-risk KPIs that carry financial or safety impact, not a 7-1.
79
00:04:16,920 –> 00:04:17,920
Soft fail.
80
00:04:17,920 –> 00:04:20,160
Escalate and justify or fix.
81
00:04:20,160 –> 00:04:22,600
Any alert state that relies solely on color?
82
00:04:22,600 –> 00:04:23,600
Fail.
83
00:04:23,600 –> 00:04:24,600
No redundancy?
84
00:04:24,600 –> 00:04:25,600
Fail.
85
00:04:25,600 –> 00:04:26,600
And here’s the brutal rule.
86
00:04:26,600 –> 00:04:28,880
If a color tweak breaks brand brand yields.
87
00:04:28,880 –> 00:04:31,120
Data truth out ranks aesthetics.
88
00:04:31,120 –> 00:04:32,640
Always.
89
00:04:32,640 –> 00:04:34,040
Tools at hand.
90
00:04:34,040 –> 00:04:35,040
Color contrast.
91
00:04:35,040 –> 00:04:37,040
Analyzer for precise checks.
92
00:04:37,040 –> 00:04:42,760
The biome for quick verification and the report level theme, Jason as your binding spell.
93
00:04:42,760 –> 00:04:44,960
Document your approved alert palette.
94
00:04:44,960 –> 00:04:49,280
Include sample foreground background screenshots and bake a contrast checklist into
95
00:04:49,280 –> 00:04:51,120
your pull request template.
96
00:04:51,120 –> 00:04:55,600
If a reviewer can’t see the state change at 100% zoom on a standard laptop in ambient
97
00:04:55,600 –> 00:04:56,920
light, it fails.
98
00:04:56,920 –> 00:04:57,920
Good.
99
00:04:57,920 –> 00:04:58,920
The heat is dropping.
100
00:04:58,920 –> 00:05:00,760
The reactor stabilizes.
101
00:05:00,760 –> 00:05:01,760
But the matrix?
102
00:05:01,760 –> 00:05:03,760
Oh ho ho.
103
00:05:03,760 –> 00:05:06,120
The subtotals are camouflaged.
104
00:05:06,120 –> 00:05:11,440
The matrix sub-total leak aggregates camouflaged.
105
00:05:11,440 –> 00:05:12,960
Observe the anomaly.
106
00:05:12,960 –> 00:05:18,200
Your matrix looks orderly, but the aggregated truth is dissolving into the fabric.
107
00:05:18,200 –> 00:05:24,960
Subtotals are masquerading as detailed rows, same color, same weight, same background.
108
00:05:24,960 –> 00:05:31,560
When the containment field, the theme, Jason, doesn’t specify subtotal styling, power
109
00:05:31,560 –> 00:05:37,880
bi defaults ooze back in like an unstable compound.
110
00:05:37,880 –> 00:05:42,320
Marvelous chaos, totals vanish in plain sight and your executives think the detail lines
111
00:05:42,320 –> 00:05:43,520
are the whole story.
112
00:05:43,520 –> 00:05:49,000
You see a matrix is a layered crystal, detail at the base, subtotals as intermediate planes,
113
00:05:49,000 –> 00:05:51,120
grand total as the capstone.
114
00:05:51,120 –> 00:05:56,480
If those planes don’t refract light differently via color, weight, background, your eye can’t
115
00:05:56,480 –> 00:05:57,880
distinguish the structure.
116
00:05:57,880 –> 00:05:58,880
That’s not a preference.
117
00:05:58,880 –> 00:06:00,560
It’s optics.
118
00:06:00,560 –> 00:06:02,600
The whole hierarchy is a physical law.
119
00:06:02,600 –> 00:06:05,720
Weaker signals recede stronger signals project.
120
00:06:05,720 –> 00:06:12,560
When the theme leaves subtotals undefined, you get weight parity, detail and subtotal at
121
00:06:12,560 –> 00:06:16,880
identical amplitude and the aggregate signal gets swallowed.
122
00:06:16,880 –> 00:06:18,040
Containment first.
123
00:06:18,040 –> 00:06:23,520
In the theme Jason, you must explicitly declare the subtotal and total styles for the matrix
124
00:06:23,520 –> 00:06:24,520
visual.
125
00:06:24,520 –> 00:06:27,960
Not the vague data colors, the targeted selectors.
126
00:06:27,960 –> 00:06:34,680
In font color, font weight, background and divider properties for both row and column subtotals.
127
00:06:34,680 –> 00:06:39,920
Give subtotals a slightly darker text color than detail, a semi opaque background band
128
00:06:39,920 –> 00:06:41,880
and a bolder top divider.
129
00:06:41,880 –> 00:06:44,720
Then for grand totals, escalate again.
130
00:06:44,720 –> 00:06:51,120
Have your weight stronger background band and a high contrast text color that clears 4.51
131
00:06:51,120 –> 00:06:52,840
against the band.
132
00:06:52,840 –> 00:06:55,800
Wonderful, elegant and incredibly necessary.
133
00:06:55,800 –> 00:07:00,280
Now tighten the molecule stream, test across deep hierarchies, step layout on, step layout
134
00:07:00,280 –> 00:07:06,440
off, row subtotals only, column subtotals only, both enabled, add negative numbers, thousand
135
00:07:06,440 –> 00:07:10,400
separators and currency symbols to raise visual noise.
136
00:07:10,400 –> 00:07:13,800
If your subtotal still pop at a glance, the field holds.
137
00:07:13,800 –> 00:07:19,920
If they blend back into detail at 80% zoom, your alloys too soft, raise contrast or weight.
138
00:07:19,920 –> 00:07:24,920
But the defaults are slippery, drill down ads indent, zebra striping ads rhythm.
139
00:07:24,920 –> 00:07:28,040
These can trick the eye into trusting structure that isn’t there.
140
00:07:28,040 –> 00:07:33,400
So we add a divider line with a distinct luminance edge above each subtotal row.
141
00:07:33,400 –> 00:07:34,640
That’s your bar of tungsten.
142
00:07:34,640 –> 00:07:39,200
The divider separates the micro rows from the macro sum, pair it with a light background
143
00:07:39,200 –> 00:07:44,240
band subtle, not blinding and a font bump, not massive, one or two steps up, enough to
144
00:07:44,240 –> 00:07:46,520
signal, not to shout.
145
00:07:46,520 –> 00:07:52,480
Numeric emphasis, without overload, right align numbers, left align labels, reduce decimals
146
00:07:52,480 –> 00:07:57,560
for subtotals to match business precision and use a consistent unit suffix.
147
00:07:57,560 –> 00:08:02,880
If a subtotal carries a different unit or aggregation logic, label it explicitly, subtotal
148
00:08:02,880 –> 00:08:03,880
QTD.
149
00:08:03,880 –> 00:08:06,360
So no one mistakes the chemistry.
150
00:08:06,360 –> 00:08:12,920
And never, never let conditional formatting for data bars obliterate subtotal visibility.
151
00:08:12,920 –> 00:08:18,600
Cap data bar saturation under subtotals or disable them for subtotal rows entirely.
152
00:08:18,600 –> 00:08:23,800
The subtotal is the sum of energy, not another particle.
153
00:08:23,800 –> 00:08:30,560
Microstory, a supply chain team missed a cost overrun hidden in the third level of a matrix.
154
00:08:30,560 –> 00:08:36,760
Detail rows danced with green bars, but the subtotal line was the same gray on white, same
155
00:08:36,760 –> 00:08:38,560
twelfth point weight.
156
00:08:38,560 –> 00:08:39,560
It vanished.
157
00:08:39,560 –> 00:08:46,160
We introduced a 10% background band, 600 weight text, one pixel divider, and boom, the overrun
158
00:08:46,160 –> 00:08:47,160
leapt out.
159
00:08:47,160 –> 00:08:49,880
Approval to corrective action in minutes, not days.
160
00:08:49,880 –> 00:08:57,200
Pass, fail protocol, precise and merciless, at 80% zoom, a viewer identifies subtotal and
161
00:08:57,200 –> 00:08:58,960
grand total in under one second.
162
00:08:58,960 –> 00:09:00,920
If not, fail.
163
00:09:00,920 –> 00:09:05,320
Text contrast for subtotals and totals against their backgrounds.
164
00:09:05,320 –> 00:09:07,440
Never drops below 3-1.
165
00:09:07,440 –> 00:09:11,240
For grand totals, drive toward 4.51.
166
00:09:11,240 –> 00:09:14,480
If subtotal text weight equals detail weight, fail.
167
00:09:14,480 –> 00:09:17,880
If the divider is absent or visually indesernable, fail.
168
00:09:17,880 –> 00:09:25,720
If zebra striping competes with subtotal bands, adjust tint or disable, clash equals fail.
169
00:09:25,720 –> 00:09:30,600
And if any override in a single visual can bypass your theme’s subtotal styling, the theme
170
00:09:30,600 –> 00:09:36,120
fails governance, fix the Jason, lock it, revalidate.
171
00:09:36,120 –> 00:09:37,120
Subtotals contained.
172
00:09:37,120 –> 00:09:40,120
The structure becomes visible, the sums radiate.
173
00:09:40,120 –> 00:09:41,680
Now, hover states.
174
00:09:41,680 –> 00:09:44,680
Tooltips are chaos plasma waiting to spill.
175
00:09:44,680 –> 00:09:51,520
Tooltip chaos, plasma, context lost on hover, observe the anomaly, you hover, you expect clarity
176
00:09:51,520 –> 00:09:55,040
and instead a smoky overlay drifts across the canvas.
177
00:09:55,040 –> 00:09:59,560
Text to faint, headers floating, background bleeding through the chart beneath.
178
00:09:59,560 –> 00:10:01,160
That’s tooltip chaos plasma.
179
00:10:01,160 –> 00:10:06,120
It swirls, it dazzles and it steals context right when the user’s attention is hottest.
180
00:10:06,120 –> 00:10:11,880
One drop, one drop of low contrast tooltip styling and your entire narrative fractures.
181
00:10:11,880 –> 00:10:17,760
You see tooltips aren’t decoration, they’re the instantaneous lab notes of your visual experiment.
182
00:10:17,760 –> 00:10:22,560
If the theme Jason doesn’t seize control of tooltip title value, background and shadow,
183
00:10:22,560 –> 00:10:25,680
power be ID fault seep in like an unstable compound.
184
00:10:25,680 –> 00:10:32,320
The result, title text flirting with 3-1, values in a misty grey, background semi-transparent
185
00:10:32,320 –> 00:10:34,080
against busy visuals.
186
00:10:34,080 –> 00:10:37,040
Vegetable slow and dangerous containment first.
187
00:10:37,040 –> 00:10:42,440
In the theme Jason, specify tooltip elements explicitly.
188
00:10:42,440 –> 00:10:49,360
Title font color, high contrast against the pane, value color, darker assertive, category
189
00:10:49,360 –> 00:10:52,920
labels, a step lower but still legible.
190
00:10:52,920 –> 00:10:59,240
Background, opaque enough to smother the chart noise behind, no gauzy translucent.
191
00:10:59,240 –> 00:11:04,720
Then the shadow, subtle but real creating a luminance edge that separates the tooltip from
192
00:11:04,720 –> 00:11:05,720
the scene.
193
00:11:05,720 –> 00:11:08,840
We’re welding a shell around the plasma not sprinkling glitter.
194
00:11:08,840 –> 00:11:11,400
Now this is important because the brain is sprinting.
195
00:11:11,400 –> 00:11:14,760
When a user hovers they expect sub 150 mis comprehension.
196
00:11:14,760 –> 00:11:20,800
If they have to squint, read twice or tilt the screen, you’ve introduced latency into
197
00:11:20,800 –> 00:11:22,320
the decision reactor.
198
00:11:22,320 –> 00:11:28,240
So we enforce AA contrast, 4.51 for all tooltip text, full stop.
199
00:11:28,240 –> 00:11:33,640
And includes the tiny bits, axis labels inside the tooltip, secondary metrics and those
200
00:11:33,640 –> 00:11:36,600
slide footnotes some visual sneak in.
201
00:11:36,600 –> 00:11:44,920
No mid tone mush, no brand grey excuses, scope matters, standard tooltips, report page tooltips,
202
00:11:44,920 –> 00:11:50,320
anomaly detection tooltips, the each obey different defaults, your theme must force order
203
00:11:50,320 –> 00:11:52,080
across all of them.
204
00:11:52,080 –> 00:11:57,120
For report page tooltips, assume someone has sprinkled backgrounds, shapes and small
205
00:11:57,120 –> 00:11:58,760
cards on that page.
206
00:11:58,760 –> 00:12:03,280
Set the tooltip canvas color and all text styles in the theme.
207
00:12:03,280 –> 00:12:07,760
So those nested elements still meet contrast against the pain.
208
00:12:07,760 –> 00:12:11,360
Think layered shielding, pain, then background, then text.
209
00:12:11,360 –> 00:12:14,120
Each layer must pass or the core escapes.
210
00:12:14,120 –> 00:12:17,560
Content discipline, oh ho ho, this is where most teams melt.
211
00:12:17,560 –> 00:12:20,640
Top line, metric name, not a cryptic code.
212
00:12:20,640 –> 00:12:24,840
Second line, time or context like last 30 days or current month.
213
00:12:24,840 –> 00:12:31,280
In a max of two supporting values, avoid walls of text, tooltips are bursts of plasma,
214
00:12:31,280 –> 00:12:32,720
not a textbook.
215
00:12:32,720 –> 00:12:38,040
If you must at explanation, use a short label like notes and a single phrase.
216
00:12:38,040 –> 00:12:40,080
Anything more belongs in a drill through.
217
00:12:40,080 –> 00:12:46,440
Performance, sanity, heavy dax on hover is like pumping thick oil through a capillary tube.
218
00:12:46,440 –> 00:12:49,920
If your tooltip queries drag, uses hover, weight and abandon.
219
00:12:49,920 –> 00:12:51,560
Pre-calculate where it’s reasonable.
220
00:12:51,560 –> 00:12:53,480
Cash small lookups.
221
00:12:53,480 –> 00:12:54,920
Why expressions?
222
00:12:54,920 –> 00:12:57,760
Target sub 115, my am’s render.
223
00:12:57,760 –> 00:12:59,600
Speed is clarity.
224
00:12:59,600 –> 00:13:02,200
Testing protocol, merciless and repeatable.
225
00:13:02,200 –> 00:13:07,680
Place a tooltip over a dense stacked bar, over a dark map, over a zebra striped table.
226
00:13:07,680 –> 00:13:13,360
If the text remains legible at 100% zoom and the header stands apart from values at a glance,
227
00:13:13,360 –> 00:13:14,200
pass.
228
00:13:14,200 –> 00:13:17,640
If any label truncates the key KPI name, fail.
229
00:13:17,640 –> 00:13:20,840
If the shadow is imperceptible on bright canvases, deepen it.
230
00:13:20,840 –> 00:13:25,440
If the background shows chart lines through the pane enough to interfere with reading,
231
00:13:25,440 –> 00:13:27,440
increase opacity.
232
00:13:27,440 –> 00:13:35,920
Contrast, 4.51 or higher, validated with real pixel samples captured from the overlay itself.
233
00:13:35,920 –> 00:13:41,680
Microstory, a marketing lead complained that anomaly tooltips did nothing.
234
00:13:41,680 –> 00:13:46,800
They did plenty, just in a translucent gray pane with pale header over a vibrant map.
235
00:13:46,800 –> 00:13:53,000
Using punch through, we locked a dark tooltip background, crisp white title at 7-1 value
236
00:13:53,000 –> 00:13:59,200
in near black, added padding so text didn’t kiss the edges, yes, and the anomalies finally
237
00:13:59,200 –> 00:14:01,360
shouted instead of whispering.
238
00:14:01,360 –> 00:14:06,520
Pass, fail, checklist, AA contrast on all tooltip text, pass.
239
00:14:06,520 –> 00:14:10,040
Opake background sufficient to erase underlying noise.
240
00:14:10,040 –> 00:14:13,080
Pass, title value hierarchy obvious in under half a second?
241
00:14:13,080 –> 00:14:14,080
Pass.
242
00:14:14,080 –> 00:14:18,480
Reutation of KPI names pass, render snappy, pass, anything else is a leak.
243
00:14:18,480 –> 00:14:22,920
Fix the JSON retest commit, hover stabilized, context contained.
244
00:14:22,920 –> 00:14:27,040
Now, tighten your grip, we are handling uranium next.
245
00:14:27,040 –> 00:14:34,480
Card visual uranium, fonts and hierarchy out of control, ahh, card visuals, pure, undiluted
246
00:14:34,480 –> 00:14:38,200
power, a single number with the mass of a star.
247
00:14:38,200 –> 00:14:41,280
But untreated, they sprawl, they shrink, they wobble.
248
00:14:41,280 –> 00:14:45,780
You and label parity destroys hierarchy and suddenly a dashboard reads like a ransom
249
00:14:45,780 –> 00:14:47,340
note.
250
00:14:47,340 –> 00:14:53,400
Card visuals are uranium, potent, glowing and catastrophically unstable without a proper
251
00:14:53,400 –> 00:14:54,720
containment field.
252
00:14:54,720 –> 00:14:56,120
Here’s what actually happens.
253
00:14:56,120 –> 00:15:01,960
You build a theme, you set brand fonts and you forget to constrain card value size, label
254
00:15:01,960 –> 00:15:04,200
ratio and call a separation.
255
00:15:04,200 –> 00:15:08,960
Power BI defaults creep back in and every card negotiates its own physics.
256
00:15:08,960 –> 00:15:17,180
One card screams at 48 pt, the next whispers at 22 pt, labels either vanish or compete
257
00:15:17,180 –> 00:15:19,200
at the same weight as the value.
258
00:15:19,200 –> 00:15:24,120
Users scan left to right, see a cacophony and their cognitive load spikes, decision latency
259
00:15:24,120 –> 00:15:27,120
rises, trust drops.
260
00:15:27,120 –> 00:15:29,480
Containment first, lock the reactor.
261
00:15:29,480 –> 00:15:36,840
In the theme JSON, define explicit font families, then set value font size ranges per visual
262
00:15:36,840 –> 00:15:41,960
type, standard card, multi-row card, KPI.
263
00:15:41,960 –> 00:15:48,240
Establish the ratio, value size must exceed label size by a fixed multiplier, 1.8 to 2.2
264
00:15:48,240 –> 00:15:51,040
x often lands right, pick one and freeze it.
265
00:15:51,040 –> 00:15:56,700
Color separation, value in high contrast primary text color, label in a secondary that still
266
00:15:56,700 –> 00:16:01,520
clears 4.51 against the background, no ghost gray labels.
267
00:16:01,520 –> 00:16:05,800
If you can’t read the context, the number loses meaning.
268
00:16:05,800 –> 00:16:11,960
Vs need specs, standard card, large value, compact label, controlled padding, multi-row
269
00:16:11,960 –> 00:16:17,560
card, smaller values, consistent spacing, label right aligned or stacked with disciplined line
270
00:16:17,560 –> 00:16:24,920
height, no wrapping unless absolutely required, and if wrapping occurs, your width is too narrow.
271
00:16:24,920 –> 00:16:30,160
KPI visual, value dominance with a subordinate trend and goal.
272
00:16:30,160 –> 00:16:34,840
Arrow icons must be legible and never carry meaning by color alone, per color with shape
273
00:16:34,840 –> 00:16:35,840
or text.
274
00:16:35,840 –> 00:16:39,280
Number formatting, this is your isotope purity.
275
00:16:39,280 –> 00:16:44,440
Standardize units, decimals and suffixes, decide when to show KMB and when to display full
276
00:16:44,440 –> 00:16:50,120
precision, never concatenate text into the measure to fake labels, use proper label fields
277
00:16:50,120 –> 00:16:55,320
so the theme can style them, reserve bold for the value, keep labels normal or semi-bold
278
00:16:55,320 –> 00:16:56,400
at most.
279
00:16:56,400 –> 00:17:01,240
And align across the grid, cards in a row should share value baseline and cap height, so
280
00:17:01,240 –> 00:17:04,200
the eye glides rather than stumbles.
281
00:17:04,200 –> 00:17:10,240
Normal rhythm diffuses sprawl, set max width and consistent margins, so no single card
282
00:17:10,240 –> 00:17:11,960
balloons and dominates.
283
00:17:11,960 –> 00:17:17,360
If a number is inherently long, think percentages with decimals, reduce decimals or adopt abbreviations
284
00:17:17,360 –> 00:17:18,360
consistently.
285
00:17:18,360 –> 00:17:24,440
If a metric must shout, don’t inflate the font, change the context panel, add an icon or relocate
286
00:17:24,440 –> 00:17:27,760
it to a spotlight section with deliberate spacing.
287
00:17:27,760 –> 00:17:29,560
Control the energy, don’t let it saturate the room.
288
00:17:29,560 –> 00:17:31,720
Now, test like a physicist.
289
00:17:31,720 –> 00:17:37,880
Update a row of 5 cards, revenue, margin, percent, NPS, incidents and uptime.
290
00:17:37,880 –> 00:17:42,720
Apply your theme, at 100% zoom, can you distinguish value from label immediately?
291
00:17:42,720 –> 00:17:45,920
Does each value share a common scale of size?
292
00:17:45,920 –> 00:17:48,640
Does the label remain legible with AA contrast?
293
00:17:48,640 –> 00:17:52,240
Do long labels truncate gracefully or wrap without destroying rhythm?
294
00:17:52,240 –> 00:17:54,880
If any card deviates, your containment is leaking.
295
00:17:54,880 –> 00:17:56,960
Adjust the JSON retest iterate.
296
00:17:56,960 –> 00:18:04,640
An operation dashboard used two card styles across pages, one with 52 PT values and faint
297
00:18:04,640 –> 00:18:08,760
labels, another with 28 PT values and bold labels.
298
00:18:08,760 –> 00:18:13,880
Managers fixated on the loud cards and ignored the quiet ones, even when the quiet ones were
299
00:18:13,880 –> 00:18:15,360
SLA breaches.
300
00:18:15,360 –> 00:18:23,680
We locked value to label at 2X and forced 4.51 label contrast constrained widths and boom,
301
00:18:23,680 –> 00:18:25,680
their scanning pattern normalized.
302
00:18:25,680 –> 00:18:28,200
SLA breaches were seen and acted upon.
303
00:18:28,200 –> 00:18:31,480
Pass, fail, merciless.
304
00:18:31,480 –> 00:18:36,280
Value to label ratio consistent across all card types?
305
00:18:36,280 –> 00:18:39,880
Pass, label and value each meet AA contrast against background?
306
00:18:39,880 –> 00:18:42,800
Pass, no overflow or wrapping of values?
307
00:18:42,800 –> 00:18:46,840
Pass, if it wraps, fix width or format.
308
00:18:46,840 –> 00:18:49,880
Labels never equal or exceed value weight.
309
00:18:49,880 –> 00:18:54,040
Pass, icons or directional cues legible and not color only.
310
00:18:54,040 –> 00:18:55,040
Pass.
311
00:18:55,040 –> 00:18:59,780
The card that deviates under theme application indicates a governance failure, update the
312
00:18:59,780 –> 00:19:03,720
JSON selectors, commit and block overrides.
313
00:19:03,720 –> 00:19:07,160
Cards tamed, the uranium glows steadily within thick lead walls.
314
00:19:07,160 –> 00:19:10,120
The board sees the number, understands the label and moves.
315
00:19:10,120 –> 00:19:15,960
Now with hovers stabilized and cards contained, we breach the final surface, slicer states.
316
00:19:15,960 –> 00:19:19,840
Selected versus unselected lies are next and they are slippery.
317
00:19:19,840 –> 00:19:24,560
Slicer state deception, selected versus unselected lies.
318
00:19:24,560 –> 00:19:27,360
Now we confront the trickster, slicers.
319
00:19:27,360 –> 00:19:33,560
They look innocent but when selected, unselected and disabled states share the same visual energy,
320
00:19:33,560 –> 00:19:36,120
the containment field collapses.
321
00:19:36,120 –> 00:19:42,920
Users think they’re seeing all data while a silent filter strangles the result set.
322
00:19:42,920 –> 00:19:45,520
That’s not UX friction, that’s a governance breach.
323
00:19:45,520 –> 00:19:48,680
You see, slicers are switches in a reactor panel.
324
00:19:48,680 –> 00:19:52,760
If the toggles don’t glow differently when they’re engaged, operators guess.
325
00:19:52,760 –> 00:19:55,120
Routes in analytics is radioactive.
326
00:19:55,120 –> 00:19:56,200
Routes cause?
327
00:19:56,200 –> 00:20:01,960
The theme JSON leaves slicer states vague, so Power BI defaults ooze back like an unstable
328
00:20:01,960 –> 00:20:02,960
compound.
329
00:20:02,960 –> 00:20:08,240
Hovers looks like selected, disabled looks like unselected, and multi-select chaos turns
330
00:20:08,240 –> 00:20:11,880
every tile into the same gray biscuit.
331
00:20:11,880 –> 00:20:16,080
Marvelous chaos, catastrophic outcomes.
332
00:20:16,080 –> 00:20:17,080
Containment first.
333
00:20:17,080 –> 00:20:21,680
In the theme JSON, define the four states explicitly.
334
00:20:21,680 –> 00:20:24,040
Ace item, unselected.
335
00:20:24,040 –> 00:20:29,160
Text color at high legibility, background neutral, border subtle.
336
00:20:29,160 –> 00:20:34,560
Selected, a distinct background band plus a crisp text color that jumps, contrast at
337
00:20:34,560 –> 00:20:36,320
AA against the band.
338
00:20:36,320 –> 00:20:41,560
Hover, an outline or elevation change, not a color that mimics selected.
339
00:20:41,560 –> 00:20:45,960
Disabled, reduce opacity and drop saturation, but keep text legible at AA.
340
00:20:45,960 –> 00:20:49,160
It must look unavailable without becoming unreadable.
341
00:20:49,160 –> 00:20:54,960
For list and drop down slicers enforce a visible check mark or leading icon for selected items.
342
00:20:54,960 –> 00:20:56,720
That’s your shape redundancy.
343
00:20:56,720 –> 00:21:03,600
For tile slicers, set selected background to a firm tint with 4.5, one text and a visible
344
00:21:03,600 –> 00:21:05,520
one to 2px border.
345
00:21:05,520 –> 00:21:10,720
And for date hierarchy slicers, style the selected range chip so it’s unmistakable.
346
00:21:10,720 –> 00:21:14,800
Dark chip, bright text, clear from two.
347
00:21:14,800 –> 00:21:16,320
Affordance is everything.
348
00:21:16,320 –> 00:21:18,960
Place an always on reset button.
349
00:21:18,960 –> 00:21:24,080
Argin off to hit, labeled reset filters and bound to clear selections.
350
00:21:24,080 –> 00:21:28,320
Then add a report level filter summary text at the top of the canvas.
351
00:21:28,320 –> 00:21:34,960
Filters, region, equals eAmia, product, eagles all, date, eels last 30 days.
352
00:21:34,960 –> 00:21:36,840
That’s your on canvas guide or counter.
353
00:21:36,840 –> 00:21:40,720
If users can’t articulate the filter state in one second, the field is lying.
354
00:21:40,720 –> 00:21:43,280
Keyboard and screen reader paths matter.
355
00:21:43,280 –> 00:21:46,720
Ensure the focus ring is high contrast and consistent across states.
356
00:21:46,720 –> 00:21:52,040
When tabbing, the selected item should announce a selected with the group name read aloud.
357
00:21:52,040 –> 00:21:56,560
Tooltip labels on slicer items should echo the state.
358
00:21:56,560 –> 00:21:59,280
Selected North America.
359
00:21:59,280 –> 00:22:01,080
No ambiguity.
360
00:22:01,080 –> 00:22:05,960
If a keyboard only user can’t change selection confidently, fail.
361
00:22:05,960 –> 00:22:06,960
Testing protocol.
362
00:22:06,960 –> 00:22:08,800
Tighten the molecule stream.
363
00:22:08,800 –> 00:22:12,400
Build a grid with list, drop-down, tile and date.
364
00:22:12,400 –> 00:22:16,960
Fill single select, then multi select, throw dark and light page backgrounds at them.
365
00:22:16,960 –> 00:22:21,240
Place slices above heat maps and photos to force real contrast tests.
366
00:22:21,240 –> 00:22:25,960
At a three-foot viewing distance, can a colleague identify which items are selected in under
367
00:22:25,960 –> 00:22:27,200
one second?
368
00:22:27,200 –> 00:22:29,960
If not, the energy signature is too faint.
369
00:22:29,960 –> 00:22:34,080
Boost background tint, border or iconography.
370
00:22:34,080 –> 00:22:35,080
Performance sanity.
371
00:22:35,080 –> 00:22:37,000
Keep visual headers lean.
372
00:22:37,000 –> 00:22:40,440
Don’t bury the clear icon under low opacity mush.
373
00:22:40,440 –> 00:22:44,440
Ensure select all is either style distinctly or removed.
374
00:22:44,440 –> 00:22:48,720
Half visible select all flips are chaos plasma in production.
375
00:22:48,720 –> 00:22:51,360
Pass flush fail merciless.
376
00:22:51,360 –> 00:22:54,760
Selection state recognizable at a glance from three feet.
377
00:22:54,760 –> 00:22:55,760
Pass.
378
00:22:55,760 –> 00:22:57,760
If users squint or lean in, fail.
379
00:22:57,760 –> 00:23:01,080
A contrast for all states text and icons on any page background.
380
00:23:01,080 –> 00:23:02,080
Pass.
381
00:23:02,080 –> 00:23:04,080
Anything under 4.51 fail.
382
00:23:04,080 –> 00:23:06,920
Reset discoverable within one second and works.
383
00:23:06,920 –> 00:23:07,920
Pass.
384
00:23:07,920 –> 00:23:10,920
Hidden reset equals fail.
385
00:23:10,920 –> 00:23:13,000
Focus ring visible and consistent.
386
00:23:13,000 –> 00:23:15,200
Screen reader announces state and group.
387
00:23:15,200 –> 00:23:16,200
Pass.
388
00:23:16,200 –> 00:23:17,680
If not, fail.
389
00:23:17,680 –> 00:23:20,040
Hover never impersonates selected.
390
00:23:20,040 –> 00:23:22,080
Disabled never impersonates unselected.
391
00:23:22,080 –> 00:23:23,080
Any mimicry?
392
00:23:23,080 –> 00:23:24,280
Fail.
393
00:23:24,280 –> 00:23:26,040
States stabilized.
394
00:23:26,040 –> 00:23:27,360
Decisions clear.
395
00:23:27,360 –> 00:23:28,360
Containment holds.
396
00:23:28,360 –> 00:23:30,200
The validation protocol.
397
00:23:30,200 –> 00:23:31,200
Policy.
398
00:23:31,200 –> 00:23:32,200
Automation.
399
00:23:32,200 –> 00:23:33,200
Version control.
400
00:23:33,200 –> 00:23:35,200
Now we forge the containment.
401
00:23:35,200 –> 00:23:38,160
Protocol that turns style into law.
402
00:23:38,160 –> 00:23:39,160
One validation report.
403
00:23:39,160 –> 00:23:41,320
Not five, not scattered screenshots.
404
00:23:41,320 –> 00:23:47,360
A single brutal gauntlet with light and dark pages that hosts every surface.
405
00:23:47,360 –> 00:23:48,760
We just disciplined.
406
00:23:48,760 –> 00:23:49,760
Cards.
407
00:23:49,760 –> 00:23:50,760
KPI.
408
00:23:50,760 –> 00:23:52,720
Matrix with deep hierarchies.
409
00:23:52,720 –> 00:23:54,800
Line column charts with grid lines.
410
00:23:54,800 –> 00:23:55,800
Slicers.
411
00:23:55,800 –> 00:23:56,800
List.
412
00:23:56,800 –> 00:23:57,800
Dropdown.
413
00:23:57,800 –> 00:23:58,800
Tile.
414
00:23:58,800 –> 00:23:59,800
Date.
415
00:23:59,800 –> 00:24:00,800
Tooltips.
416
00:24:00,800 –> 00:24:01,800
Standard and report page.
417
00:24:01,800 –> 00:24:04,600
And a dense background image to expose contrast lies.
418
00:24:04,600 –> 00:24:06,200
This is your reactor hall.
419
00:24:06,200 –> 00:24:07,800
Automate the inspections.
420
00:24:07,800 –> 00:24:10,400
First, a contrast sweep.
421
00:24:10,400 –> 00:24:13,280
Capture pixel samples from representative visuals.
422
00:24:13,280 –> 00:24:15,800
Alert text on card background.
423
00:24:15,800 –> 00:24:17,960
Matrix subtotal on band.
424
00:24:17,960 –> 00:24:20,040
Tooltip title on pain.
425
00:24:20,040 –> 00:24:22,440
Slicer text on selected tint.
426
00:24:22,440 –> 00:24:25,040
And run them through your analyzer.
427
00:24:25,040 –> 00:24:28,320
Log ratios right in the report with a tiny measure table.
428
00:24:28,320 –> 00:24:30,040
3.1 for graphics.
429
00:24:30,040 –> 00:24:32,160
4.5.1 for text.
430
00:24:32,160 –> 00:24:35,560
Aim. 7.1 for high-risk KPIs.
431
00:24:35,560 –> 00:24:39,120
Any value below threshold trips a visual fail badge.
432
00:24:39,120 –> 00:24:40,840
Second, hierarchy audit.
433
00:24:40,840 –> 00:24:46,520
Measures check font size weight parity between detail and subtotal and flag parity as failure.
434
00:24:46,520 –> 00:24:52,800
A deck’s driven, at a glance time test stamps pass only if subtotals and grand totals are
435
00:24:52,800 –> 00:24:56,560
distinguishable in under one second at 80% zoom.
436
00:24:56,560 –> 00:24:57,560
Harsh?
437
00:24:57,560 –> 00:24:58,560
Good.
438
00:24:58,560 –> 00:25:00,040
The physics of perception or harsh.
439
00:25:00,040 –> 00:25:02,560
Third, tooltip readability checklist.
440
00:25:02,560 –> 00:25:05,240
A toggle page cycles background density.
441
00:25:05,240 –> 00:25:07,800
Busy chart, dark map, zebra table.
442
00:25:07,800 –> 00:25:13,840
And snaps pass fail states for title value, truncation, pain opacity and shadow visibility.
443
00:25:13,840 –> 00:25:17,040
Under 115ms render, pass, stutter, fail.
444
00:25:17,040 –> 00:25:18,040
We’re not guessing.
445
00:25:18,040 –> 00:25:19,040
We’re timing.
446
00:25:19,040 –> 00:25:21,000
Jason S. Code bind it to schema.
447
00:25:21,000 –> 00:25:22,640
Link the public power BI theme.
448
00:25:22,640 –> 00:25:24,720
Jason schema in your IDE.
449
00:25:24,720 –> 00:25:26,320
So invalid selectors.
450
00:25:26,320 –> 00:25:28,000
Scream immediately.
451
00:25:28,000 –> 00:25:29,960
Read the theme to git or Azure DevOps.
452
00:25:29,960 –> 00:25:32,800
Every change opens a pull request with three attachments.
453
00:25:32,800 –> 00:25:35,440
The Jason, the exported validation report.
454
00:25:35,440 –> 00:25:38,120
Pbix and a screenshot collage of contrast pairs.
455
00:25:38,120 –> 00:25:42,960
Reviewers run the report, verify the badges and only then approve.
456
00:25:42,960 –> 00:25:43,960
Organizational deployment.
457
00:25:43,960 –> 00:25:44,960
Tenon themes.
458
00:25:44,960 –> 00:25:45,960
Signed.
459
00:25:45,960 –> 00:25:46,960
Enversioned.
460
00:25:46,960 –> 00:25:48,960
Publish V1.3.2.
461
00:25:48,960 –> 00:25:49,960
Not.
462
00:25:49,960 –> 00:25:50,960
Final.
463
00:25:50,960 –> 00:25:51,960
New.
464
00:25:51,960 –> 00:25:52,960
Jason.
465
00:25:52,960 –> 00:25:56,360
Block local overrides on certified workspaces.
466
00:25:56,360 –> 00:26:02,960
If a report attempts to override a govern selector, cards, matrix subtotals, slicers, policy rejects
467
00:26:02,960 –> 00:26:05,240
it, or flags it in CI.
468
00:26:05,240 –> 00:26:07,680
Delicious discipline.
469
00:26:07,680 –> 00:26:10,440
Governance workflow, precise and repeatable.
470
00:26:10,440 –> 00:26:11,440
Design.
471
00:26:11,440 –> 00:26:12,440
Peer review.
472
00:26:12,440 –> 00:26:13,440
Accessibility.
473
00:26:13,440 –> 00:26:14,440
Plus hierarchy.
474
00:26:14,440 –> 00:26:16,960
Plus tooltip audit.
475
00:26:16,960 –> 00:26:18,400
Validation report pass.
476
00:26:18,400 –> 00:26:20,240
No AA failures.
477
00:26:20,240 –> 00:26:22,080
Five surfaces pass.
478
00:26:22,080 –> 00:26:24,480
Usability at 100% zoom.
479
00:26:24,480 –> 00:26:27,200
He are approval with named reviewers.
480
00:26:27,200 –> 00:26:28,680
Tenant deploy.
481
00:26:28,680 –> 00:26:29,680
Announce.
482
00:26:29,680 –> 00:26:30,680
Change log.
483
00:26:30,680 –> 00:26:31,680
Exceptions.
484
00:26:31,680 –> 00:26:32,680
Document variance.
485
00:26:32,680 –> 00:26:35,040
List affected visuals.
486
00:26:35,040 –> 00:26:37,520
Including custom visuals that ignore theme.
487
00:26:37,520 –> 00:26:39,480
And set a retest date.
488
00:26:39,480 –> 00:26:41,520
Quarterly at minimum.
489
00:26:41,520 –> 00:26:42,520
Final gate.
490
00:26:42,520 –> 00:26:43,520
Etched in tungsten.
491
00:26:43,520 –> 00:26:45,720
No AA contrast failures.
492
00:26:45,720 –> 00:26:47,760
And all five surfaces pass.
493
00:26:47,760 –> 00:26:49,560
If any fail, the theme is unstable.
494
00:26:49,560 –> 00:26:50,560
Back to the lab.
495
00:26:50,560 –> 00:26:51,560
Adjust compounds.
496
00:26:51,560 –> 00:26:53,280
Re-run the reactor.
497
00:26:53,280 –> 00:26:54,720
What is the single truth?
498
00:26:54,720 –> 00:26:56,920
Your theme is the containment field.
499
00:26:56,920 –> 00:27:00,360
Govern it rootlessly or your data lies loudly and slowly.
500
00:27:00,360 –> 00:27:02,360
Adopt the validation report today.
501
00:27:02,360 –> 00:27:07,840
Wire contrast gates into PR approvals and switched to organizational themes locked by version.
502
00:27:07,840 –> 00:27:12,400
If you want the full governance build out, subscribe now and watch the deep dive next, where
503
00:27:12,400 –> 00:27:15,200
we wire the CI pipeline and bind the essence permanently.






