-._protesilaos-s-_ef_themes_.-/contrast-ratios.org

16 KiB

Ef themes: contrast ratios of the main colours

Check this files Git history for updates.

Evaluate these snippets, otherwise the tables will not work. Then update a table by typing C-c C-c with point at the #+TBLFM: line.

;; Copied from my `modus-thmes'.

;; This is the WCAG formula to measure relative luminance:
;; <https://www.w3.org/TR/WCAG20-TECHS/G18.html>.
(defun modus-themes-wcag-formula (hex)
  "Get WCAG value of color value HEX.
The value is defined in hexadecimal RGB notation, such as those in
`modus-themes-operandi-colors' and `modus-themes-vivendi-colors'."
  (cl-loop for k in '(0.2126 0.7152 0.0722)
           for x in (color-name-to-rgb hex)
           sum (* k (if (<= x 0.03928)
                        (/ x 12.92)
                      (expt (/ (+ x 0.055) 1.055) 2.4)))))

;;;###autoload
(defun modus-themes-contrast (c1 c2)
  "Measure WCAG contrast ratio between C1 and C2.
C1 and C2 are color values written in hexadecimal RGB."
  (let ((ct (/ (+ (modus-themes-wcag-formula c1) 0.05)
               (+ (modus-themes-wcag-formula c2) 0.05))))
    (max ct (/ ct))))

(defalias #'Λ #'modus-themes-contrast)

ef-autumn

Name #0f0e06 #1f1b19 #36322f
fg-main #cfbcba 10.64 9.40 6.99
fg-dim #887c8a 4.88 4.31 3.20
fg-alt #70a89f 7.18 6.34 4.71
red #ef656a 6.21 5.48 4.07
red-warmer #f26f25 6.52 5.76 4.28
red-cooler #f07f7f 7.41 6.55 4.86
red-faint #d08f72 7.23 6.39 4.75
green #2fa526 6.02 5.31 3.95
green-warmer #64aa0f 6.72 5.94 4.41
green-cooler #00b672 7.31 6.46 4.80
green-faint #519068 5.10 4.51 3.35
yellow #c48502 6.17 5.45 4.05
yellow-warmer #e0832f 6.87 6.07 4.51
yellow-cooler #df8f6f 7.64 6.75 5.02
yellow-faint #cf9f7f 8.21 7.26 5.39
blue #379cf6 6.68 5.90 4.38
blue-warmer #6a88ff 6.06 5.35 3.98
blue-cooler #029fff 6.82 6.03 4.48
blue-faint #6a84af 5.10 4.50 3.34
magenta #d570af 6.23 5.50 4.09
magenta-warmer #e580ea 7.93 7.00 5.20
magenta-cooler #af8aff 7.28 6.43 4.78
magenta-faint #c590af 7.35 6.49 4.83
cyan #4fb0cf 7.78 6.87 5.10
cyan-warmer #6fafff 8.52 7.53 5.59
cyan-cooler #3dbbb0 8.23 7.27 5.40
cyan-faint #82a0af 7.00 6.18 4.59

ef-day

Name #fff5ea #f5eddf #e9e0d8
fg-main #584141 8.68 8.04 7.17
fg-dim #63728f 4.50 4.17 3.72
fg-alt #8f5f4a 5.00 4.63 4.13
red #ba2d2f 5.57 5.15 4.60
red-warmer #ce3f00 4.50 4.17 3.72
red-cooler #cf2f4f 4.67 4.33 3.86
red-faint #b05350 4.64 4.30 3.84
green #2a7a0c 5.02 4.65 4.15
green-warmer #437000 5.48 5.08 4.53
green-cooler #0f7f5f 4.62 4.28 3.82
green-faint #61756c 4.57 4.23 3.78
yellow #a45a22 4.80 4.44 3.97
yellow-warmer #b75515 4.51 4.18 3.73
yellow-cooler #aa4f30 5.04 4.67 4.16
yellow-faint #a05f5a 4.56 4.22 3.77
blue #375cc6 5.56 5.15 4.59
blue-warmer #5f5fdf 4.66 4.31 3.85
blue-cooler #265fbf 5.62 5.20 4.64
blue-faint #4a659f 5.34 4.94 4.41
magenta #ca3e54 4.51 4.17 3.72
magenta-warmer #cb2f80 4.58 4.24 3.79
magenta-cooler #8448aa 5.59 5.18 4.62
magenta-faint #a04450 5.67 5.25 4.69
cyan #3f60af 5.57 5.16 4.60
cyan-warmer #3f6faf 4.75 4.40 3.93
cyan-cooler #0f7b8f 4.59 4.25 3.79
cyan-faint #4f6f8f 4.87 4.51 4.03

ef-dark

Name #000000 #1a1a1a #2b2b2b
fg-main #d0d0d0 13.62 11.28 9.18
fg-dim #807f9f 5.45 4.52 3.68
fg-alt #89afef 9.44 7.83 6.37
red #ef6560 6.70 5.55 4.52
red-warmer #f47360 7.47 6.19 5.04
red-cooler #ff5a7a 7.00 5.80 4.72
red-faint #d56f72 6.35 5.26 4.28
green #0faa26 6.80 5.63 4.58
green-warmer #6aad0f 7.60 6.30 5.12
green-cooler #00a692 6.87 5.69 4.63
green-faint #61a06c 6.75 5.60 4.55
yellow #c48032 6.48 5.37 4.37
yellow-warmer #d1843f 7.08 5.87 4.78
yellow-cooler #df8f5a 8.21 6.81 5.54
yellow-faint #cf9f8f 9.01 7.47 6.07
blue #3f95f6 6.84 5.67 4.61
blue-warmer #6a9fff 8.02 6.64 5.40
blue-cooler #029fff 7.41 6.14 4.99
blue-faint #7a94df 7.13 5.91 4.81
magenta #d369af 6.41 5.31 4.32
magenta-warmer #e580ea 8.61 7.13 5.80
magenta-cooler #af85ff 7.62 6.32 5.14
magenta-faint #c57faf 7.03 5.83 4.74
cyan #4fbaef 9.60 7.96 6.47
cyan-warmer #6fafff 9.25 7.67 6.24
cyan-cooler #1dbfcf 9.41 7.80 6.34
cyan-faint #8aa0df 8.17 6.77 5.51

ef-light

Name #ffffff #efefef #dbdbdb
fg-main #202020 16.29 14.17 11.77
fg-dim #70627f 5.61 4.88 4.05
fg-alt #196f70 5.92 5.15 4.27
red #d3303a 4.94 4.29 3.57
red-warmer #e00033 4.98 4.33 3.60
red-cooler #d50f7f 5.00 4.34 3.61
red-faint #c24552 4.92 4.28 3.55
green #217a3c 5.37 4.67 3.88
green-warmer #4a7d00 4.97 4.32 3.59
green-cooler #008858 4.50 3.92 3.25
green-faint #61756c 4.92 4.28 3.55
yellow #a45f22 4.95 4.31 3.58
yellow-warmer #b6532f 4.92 4.28 3.55
yellow-cooler #b65050 4.94 4.29 3.57
yellow-faint #a65f6a 4.70 4.09 3.40
blue #375cd8 5.70 4.96 4.12
blue-warmer #4250ef 5.79 5.04 4.18
blue-cooler #065fff 5.14 4.47 3.71
blue-faint #6060d0 5.15 4.47 3.72
magenta #ba35af 4.98 4.33 3.60
magenta-warmer #cf25aa 4.67 4.06 3.37
magenta-cooler #6052cf 5.82 5.07 4.21
magenta-faint #bf3580 5.20 4.52 3.76
cyan #1f6fbf 5.14 4.47 3.71
cyan-warmer #3f6faf 5.12 4.45 3.70
cyan-cooler #1f77bb 4.76 4.14 3.44
cyan-faint #506fa0 5.09 4.43 3.68

ef-night

Name #000e17 #0f1b29 #1a2a2f
fg-main #afbcbf 10.02 8.91 7.60
fg-dim #70819f 4.96 4.41 3.76
fg-alt #b0a0a0 7.80 6.93 5.92
red #ef656a 6.27 5.57 4.76
red-warmer #f47360 6.95 6.18 5.27
red-cooler #ef798f 7.26 6.45 5.51
red-faint #d56f72 5.90 5.25 4.48
green #1fa526 6.02 5.35 4.57
green-warmer #50a22f 6.09 5.42 4.63
green-cooler #00b672 7.38 6.56 5.60
green-faint #61a06c 6.28 5.59 4.77
yellow #c48502 6.23 5.54 4.73
yellow-warmer #e6832f 7.12 6.33 5.40
yellow-cooler #df8f6f 7.72 6.86 5.86
yellow-faint #cf9f7f 8.30 7.38 6.30
blue #379cf6 6.74 6.00 5.12
blue-warmer #6a88ff 6.12 5.44 4.65
blue-cooler #029fff 6.89 6.13 5.23
blue-faint #7a94df 6.63 5.90 5.03
magenta #d570af 6.29 5.60 4.78
magenta-warmer #e580ea 8.01 7.12 6.08
magenta-cooler #af8aff 7.35 6.54 5.58
magenta-faint #c59faf 8.33 7.40 6.32
cyan #4fb0cf 7.85 6.98 5.96
cyan-warmer #6fafff 8.60 7.65 6.53
cyan-cooler #3dc0b0 8.71 7.75 6.61
cyan-faint #92b4df 9.13 8.12 6.93

ef-spring

Name #f6fff9 #e8f0f0 #e0e6e3
fg-main #3f4946 9.14 8.06 7.37
fg-dim #707586 4.50 3.97 3.63
fg-alt #9d5e7a 4.77 4.21 3.85
red #c42d2f 5.47 4.82 4.41
red-warmer #d03003 5.01 4.42 4.04
red-cooler #cf2f4f 4.93 4.35 3.98
red-faint #b64850 5.11 4.50 4.12
green #14872f 4.54 4.00 3.66
green-warmer #4a7d00 4.87 4.30 3.93
green-cooler #007f68 4.86 4.29 3.92
green-faint #61756c 4.82 4.25 3.89
yellow #a45f22 4.86 4.28 3.92
yellow-warmer #b6540f 4.83 4.26 3.89
yellow-cooler #ae5a30 4.78 4.22 3.86
yellow-faint #876450 5.19 4.57 4.18
blue #375cc6 5.87 5.17 4.73
blue-warmer #5f5fdf 4.92 4.33 3.96
blue-cooler #265fbf 5.93 5.23 4.78
blue-faint #6a65bf 4.87 4.30 3.93
magenta #d5206f 4.83 4.26 3.89
magenta-warmer #cb26a0 4.76 4.20 3.84
magenta-cooler #9435b4 6.01 5.30 4.84
magenta-faint #a04450 5.99 5.28 4.83
cyan #1f6fbf 5.04 4.44 4.06
cyan-warmer #3f6faf 5.02 4.42 4.04
cyan-cooler #0f7b8f 4.84 4.27 3.91
cyan-faint #5f60bf 5.26 4.64 4.24

ef-summer

Name #fff2f3 #fbe3ef #efd0e4
fg-main #5f456f 7.50 6.75 5.77
fg-dim #68717f 4.52 4.07 3.48
fg-alt #af506f 4.58 4.13 3.53
red #d3303a 4.52 4.08 3.48
red-warmer #e00033 4.56 4.11 3.51
red-cooler #d50f7f 4.58 4.12 3.52
red-faint #c24552 4.51 4.06 3.47
green #217a3c 4.92 4.43 3.78
green-warmer #4a7d00 4.56 4.10 3.51
green-cooler #007f68 4.54 4.09 3.50
green-faint #61756c 4.51 4.06 3.47
yellow #a45f22 4.54 4.09 3.49
yellow-warmer #b6532f 4.51 4.06 3.47
yellow-cooler #b65050 4.53 4.08 3.48
yellow-faint #9a5f6a 4.56 4.11 3.51
blue #375ce6 5.02 4.52 3.86
blue-warmer #5250ef 5.13 4.62 3.95
blue-cooler #065fff 4.71 4.24 3.62
blue-faint #6060d0 4.72 4.25 3.63
magenta #ba35af 4.57 4.11 3.51
magenta-warmer #cb1aaa 4.51 4.06 3.47
magenta-cooler #7450df 4.87 4.38 3.74
magenta-faint #bf3580 4.77 4.30 3.67
cyan #1f6fbf 4.71 4.24 3.63
cyan-warmer #3f6faf 4.69 4.22 3.61
cyan-cooler #0f7b8f 4.53 4.08 3.49
cyan-faint #5f60bf 4.92 4.43 3.79

ef-winter

Name #0f0b15 #161926 #202234
fg-main #b8c6d5 11.19 10.05 9.01
fg-dim #807c9f 4.91 4.41 3.96
fg-alt #bf8f8f 6.99 6.28 5.63
red #f47359 6.90 6.20 5.56
red-warmer #ef6560 6.21 5.58 5.00
red-cooler #ff6a7a 7.04 6.32 5.67
red-faint #d56f72 5.88 5.28 4.74
green #26a254 5.91 5.31 4.76
green-warmer #6aad0f 7.04 6.32 5.67
green-cooler #00a392 6.17 5.54 4.97
green-faint #61a06c 6.26 5.62 5.04
yellow #c48052 6.08 5.46 4.89
yellow-warmer #d1803f 6.37 5.72 5.13
yellow-cooler #df8a88 7.53 6.77 6.07
yellow-faint #c0a38a 8.20 7.37 6.60
blue #3f95f6 6.34 5.70 5.11
blue-warmer #6a9fff 7.43 6.67 5.98
blue-cooler #029fff 6.86 6.17 5.53
blue-faint #7a94df 6.61 5.94 5.32
magenta #d369af 5.94 5.34 4.78
magenta-warmer #e580e0 7.87 7.07 6.34
magenta-cooler #af85ea 6.83 6.13 5.50
magenta-faint #c57faf 6.51 5.85 5.25
cyan #4fbaef 8.90 7.99 7.17
cyan-warmer #6fafdf 8.22 7.39 6.62
cyan-cooler #35afbf 7.45 6.69 6.00
cyan-faint #8aa0df 7.58 6.81 6.10