Delta

Never colour alone

Red and green are the two hues most commonly confused, and deuteranomaly affects roughly one man in twelve. A gain shown only in green is unreadable for a meaningful share of a Nigerian audience, and unreadable for everyone on a washed-out screen in sunlight.

So the component prepends a triangle through a pseudo-element. The colour is reinforcement; the glyph is the message.

<p><span class="p234-delta" data-direction="up">2.4%</span></p>
<p><span class="p234-delta" data-direction="down">0.8%</span></p>
<p><span class="p234-delta">0.00</span></p>

<div style="filter:grayscale(1)">
  <p><span class="p234-delta" data-direction="up">2.4%</span></p>
  <p><span class="p234-delta" data-direction="down">0.8%</span></p>
</div>

Usage

• Set data-direction from the sign of the number, not from whether the change is good news.
• Include the unit. A naira move and a percentage move are not the same thing.
• Leave the attribute off for no change, which renders muted with no glyph.

• Do not add a plus or minus sign in the text as well. The glyph already says it, and both together reads as a double negative.
• Do not colour a figure green because it is a good outcome. Direction only.

A trap specific to this data

The NGX feed reports percent_change in naira, not per cent. A delta rendered straight from that field with a per cent sign has been wrong before. Format the value and its unit at the source, and let this component carry only direction and colour.

Contrast

data-up is checked against both paper and paper-sunk, because deltas appear inside tables. It was darkened from the first draft, which missed 4.5:1 on the sunk background by 0.17.