199 lines
10 KiB
Plaintext
199 lines
10 KiB
Plaintext
|
||
|
||
<p class="info">UPDATE 2021-01-19 14:21 +0200: The <code>color-tools.el</code> is now called
|
||
<code>ct.el</code>.</p>
|
||
|
||
<p>The Modus themes come with a customisation option to tweak the looks of
|
||
programming modes (there are lots of customisation options—consult the
|
||
<a href="https://protesilaos.com/emacs/modus-themes">official manual</a>):
|
||
<code>modus-themes-syntax 'faint</code>. The present entry documents the
|
||
refinements that were introduced to a subset of those “faint” colours.</p>
|
||
|
||
<p>In this report I am making use of the new <a href="https://github.com/neeasade/ct.el">ct.el library</a>,
|
||
developed by Github user neeasade. Even though it is not available in
|
||
any package archive as of this writing, I highly recommend it to every
|
||
Emacs user who has an interest in colour and/or who is a theme designer.
|
||
Consider it as a complement to the built-in <code>color.el</code> Emacs library
|
||
(check the source code with <code>M-x find-library</code> and then insert <code>color</code>).
|
||
What it offers compared to the built-in option is an element of
|
||
convenience, as it lets us use the colour space of our choice. In my
|
||
case that is RGB while the notation is hexadecimal.</p>
|
||
|
||
<p>Colour enthusiasts are also encouraged to read neeasade’s essay:
|
||
<a href="https://notes.neeasade.net/color-spaces.html">Reasoning about colors</a>.</p>
|
||
|
||
<p>The <code>color-tools</code> function that introduces a new test to my workflow is
|
||
<code>ct-name-distance</code>, which applies the CIE Δ<em>E</em> 2000 formula. For the
|
||
purposes of this article, I am also applying <code>ct-contrast-ratio</code>, even
|
||
though there exists <code>modus-themes-contrast</code> as part of my themes, which
|
||
builds on the same WCAG formula for contrast in relative luminance
|
||
between two values (implemented in <code>modus-themes-wcag-formula</code>).</p>
|
||
|
||
<h2>Old and new values for “faint” blues and magentas</h2>
|
||
|
||
<p>The tables below merely present the affected variables and the change in
|
||
values assigned to them. The overall intent is to slightly increase the
|
||
saturation of those colours while accounting for differences between
|
||
them in lieu of their intended purpose, which is to highlight code in a
|
||
more subtle way than the default aesthetic of the themes—read the doc
|
||
string of <code>modus-themes-syntax</code>.</p>
|
||
|
||
<p><code>cyan-faint</code> and <code>cyan-alt-other-faint</code> for Modus Operandi have also
|
||
been corrected for hueness, mainly by reducing their red light channel.
|
||
Other changes are more subtle.</p>
|
||
|
||
<pre><code class="language-org">#+DESCRIPTION: Affected values for Modus Operandi
|
||
| Internal name | Old | New |
|
||
|-------------------------+---------+---------|
|
||
| cyan-faint | #12506f | #005077 |
|
||
| cyan-alt-other-faint | #2e584f | #125458 |
|
||
| blue-faint | #002f88 | #003497 |
|
||
| blue-alt-faint | #003f78 | #0f3d8c |
|
||
| blue-alt-other-faint | #1f0f6f | #001087 |
|
||
| magenta-alt-faint | #70256f | #7b206f |
|
||
| magenta-alt-other-faint | #5f3f7f | #55348e |
|
||
|
||
#+DESCRIPTION: Affected values for Modus Vivendi
|
||
| Internal name | Old | New |
|
||
|-------------------------+---------+---------|
|
||
| blue-alt-faint | #a4b0ff | #a0acf5 |
|
||
| blue-alt-other-faint | #8fc5ff | #87c8ff |
|
||
| magenta-alt-other-faint | #d0b4ff | #cfa6ff |
|
||
</code></pre>
|
||
|
||
<p>Here is a picture of the same table with <code>M-x rainbow-mode</code> enabled, so
|
||
if it does not look clear please open it in another window:</p>
|
||
|
||
<p><img alt="Modus themes select faint colours" src="https://protesilaos.com/assets/images/attachments/modus-themes-review-faint-2021-01-11.png" /></p>
|
||
|
||
<p>Notice the fine tweaks (yes, those are the lengths we go to).</p>
|
||
|
||
<h2>Harmonising colour distance for Modus Operandi</h2>
|
||
|
||
<p>The following table only concerns Modus Operandi (we employ another
|
||
technique for Modus Vivendi—next section). It measures the distance
|
||
of the new values relative to black and white (CIE Δ<em>E</em> 2000). A value
|
||
of 100 is the maximum and it would mean in practical terms that the
|
||
closer our values are to the maximum, the more they appear as variants
|
||
of black for our light theme.</p>
|
||
|
||
<p>The table must thus be read as an attempt to slightly “brighten up”
|
||
those values and/or normalise the distance between some of them. As
|
||
such compare columns 2 to 4 and 3 to 6 (all tables are in <code>org-mode</code>
|
||
notation).</p>
|
||
|
||
<pre><code class="language-org">#+DESCRIPTION: Modus Operandi cie-DE2000 distance for faint blues and magentas
|
||
| old | #ffffff | #000000 | new | #ffffff | #000000 |
|
||
|---------+---------+---------+---------+---------+---------|
|
||
| #12506f | 58 | 27 | #005077 | 58 | 28 |
|
||
| #2e584f | 55 | 28 | #125458 | 58 | 27 |
|
||
| #002f88 | 71 | 29 | #003497 | 68 | 31 |
|
||
| #003f78 | 65 | 27 | #0f3d8c | 65 | 30 |
|
||
| #1f0f6f | 83 | 28 | #001087 | 81 | 30 |
|
||
| #70256f | 64 | 31 | #7b206f | 62 | 32 |
|
||
| #5f3f7f | 59 | 32 | #55348e | 63 | 32 |
|
||
#+TBLFM: $2='(ct-name-distance $1 @1$2);%0.0f :: $3='(ct-name-distance $1 @1$3);%0.0f :: $5='(ct-name-distance $4 @1$5);%0.0f :: $6='(ct-name-distance $4 @1$6);%0.0f
|
||
</code></pre>
|
||
|
||
<p>[ does anyone know of a more succinct <code>#+TBLFM</code> expression? ]</p>
|
||
|
||
<p>An interesting observation to make with regard to the innate properties
|
||
of the channels of light, is how <code>#001087</code> and its old <code>#1f0f6f</code>
|
||
(<code>blue-alt-other-faint</code>) is perceived as being closer to black while
|
||
compared to pure white, even though it is impressed in more-or-less the
|
||
same way as the other colours when compared to pure black (the
|
||
discrepancies in the values shown on row 6, relative to the other rows).
|
||
This is because the blue channel, here represented as pure blue
|
||
(<code>#0000ff</code>), is the darkest among the three components of the RGB
|
||
triplet that we are using (green is the brightest, red is medium (though
|
||
not precisely)).</p>
|
||
|
||
<h2>Color distance between the values of Modus Vivendi</h2>
|
||
|
||
<p>While we tested our colours against black and white for Modus Operandi,
|
||
that technique was not suitable for Modus Vivendi. This is because a
|
||
dark theme has different requirements and the reason is that the human
|
||
eye is more attuned to spot differences in colour against a dark
|
||
backdrop (and colour is, in essence, an expression of light, while the
|
||
pure black main background of Modus Vivendi is meant to represent the
|
||
absence of light—notwithstanding screen technology that always uses
|
||
light even for black).</p>
|
||
|
||
<p>As such, we are mostly interested in adjusting the distance between the
|
||
colour values that were deemed somewhat problematic (always in relative
|
||
terms, as those tweaks are virtually not discernible by the untrained
|
||
observer).</p>
|
||
|
||
<pre><code class="language-org">#+DESCRIPTION: Modus Vivendi cie-DE2000 distance OLD
|
||
| | | Distance |
|
||
|---------+---------+----------|
|
||
| #a4b0ff | #8fc5ff | 10.2885 |
|
||
| #8fc5ff | #d0b4ff | 19.9316 |
|
||
| #d0b4ff | #a4b0ff | 10.5743 |
|
||
#+TBLFM: $3='(ct-name-distance $1 $2);%0.4f
|
||
|
||
#+DESCRIPTION: Modus Vivendi cie-DE2000 distance NEW
|
||
| | | Distance |
|
||
|---------+---------+----------|
|
||
| #a0acf5 | #87c8ff | 13.2249 |
|
||
| #87c8ff | #cfa6ff | 24.2411 |
|
||
| #cfa6ff | #a0acf5 | 11.7710 |
|
||
#+TBLFM: $3='(ct-name-distance $1 $2);%0.4f
|
||
</code></pre>
|
||
|
||
<h2>Contrast compared to the main (and relevant) background values</h2>
|
||
|
||
<p>For the sake of completeness, the following tables confirm that the new
|
||
values are consistent with the overarching design principle of the
|
||
themes for a minimum contrast in relative luminance between background
|
||
and foreground of 7:1 or higher.</p>
|
||
|
||
<pre><code>#+DESCRIPTION: Modus Operandi WCAG contrast for select "faint" colours
|
||
| | #ffffff | #f8f8f8 | #f0f0f0 |
|
||
|---------+---------+---------+---------|
|
||
| #005077 | 8.70 | 8.19 | 7.63 |
|
||
| #125458 | 8.63 | 8.12 | 7.57 |
|
||
| #003497 | 10.84 | 10.20 | 9.51 |
|
||
| #0f3d8c | 10.16 | 9.57 | 8.92 |
|
||
| #001087 | 14.75 | 13.89 | 12.94 |
|
||
| #7b206f | 9.22 | 8.68 | 8.09 |
|
||
| #55348e | 9.26 | 8.72 | 8.12 |
|
||
#+TBLFM: $2='(ct-contrast-ratio $1 @1$2);%0.2f :: $3='(ct-contrast-ratio $1 @1$3);%0.2f :: $4='(ct-contrast-ratio $1 @1$4);%0.2f
|
||
|
||
#+DESCRIPTION: Modus Vivendi WCAG contrast for select "faint" colours
|
||
| | #000000 | #110b11 | #181a20 |
|
||
|---------+---------+---------+---------|
|
||
| #a0acf5 | 9.71 | 9.00 | 8.05 |
|
||
| #87c8ff | 11.74 | 10.87 | 9.72 |
|
||
| #cfa6ff | 10.55 | 9.77 | 8.74 |
|
||
#+TBLFM: $2='(ct-contrast-ratio $1 @1$2);%0.2f :: $3='(ct-contrast-ratio $1 @1$3);%0.2f :: $4='(ct-contrast-ratio $1 @1$4);%0.2f
|
||
</code></pre>
|
||
|
||
<p>As has been noted before, such as in the recent review of the <a href="https://protesilaos.com/codelog/2020-12-27-modus-themes-review-rainbow-delimiters/">faces
|
||
that pertain to the rainbow-delimiters package</a>,
|
||
there are a lot of considerations to be made when designing a theme. My
|
||
opinion is that this endeavour stands at the intersection of art and
|
||
science. We employ scientific insight in support of our choices, while
|
||
we exercise artistic judgement or freedom in interpreting the propriety
|
||
of every result in its particular context. And we do so in a
|
||
non-dogmatic way, meaning that we are prepared at all times to review
|
||
our work and challenge our assumptions.</p>
|
||
|
||
<p>Consequently and despite the fact that we remain committed to the
|
||
minimum 7:1 contrast ratio, we cannot tolerate some inadequate technique
|
||
of procedurally picking colours which conform with a target of that
|
||
sort, nor can we confine ourselves to arbitrary constraints such as
|
||
relying only on 4, 8, 16 colours or whatnot. Constraints need be
|
||
conducive to the primary design objectives and must thus remain subject
|
||
to continuous interpretation and evaluation, in order to stay in sync
|
||
with the evolving requirements of the project.</p>
|
||
|
||
<p>It is the designer who sets the constraints and delineates the
|
||
boundaries of their artistic discretion, so that there necessarily
|
||
exists an element of auto-nomy (self-determination) as opposed to
|
||
hetero-nomy (determined by an other [source]), pursuant to the tenets of
|
||
the project. The minimum contrast ratio is inviolable, yet there is
|
||
wide range of scenaria that remains to be tested and carefully examined
|
||
even after accounting for that principle.</p>
|
||
|
||
|