STOP Using Power BI Themes That Lie

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.