Skip to content

Commit fd262ea

Browse files
ctruedenclaude
andcommitted
Fix color contrast accessibility issues
This commit adjusts various colors to satisfy the checker. It also adds theme-friendly preset color variables, and uses them where appropriate. Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent be41280 commit fd262ea

File tree

8 files changed

+127
-24
lines changed

8 files changed

+127
-24
lines changed

_includes/fiji/download-links

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ div.download table {
1212
}
1313
div.download table tr.header th {
1414
font-weight: bolder;
15-
background: #65a4e3;
15+
background: #2a7bb9;
1616
color: #fff;
1717
padding: 0.7em;
1818
}

_pages/editing/index.md

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -85,23 +85,69 @@ allowing you to easily and cleanly modify text with italics, bold, ordered
8585
or bulleted lists, etc. This wiki, as a Jekyll site, uses
8686
[kramdown](https://kramdown.gettalong.org/syntax.html). A quick-reference can be found [here](https://kramdown.gettalong.org/quickref.html), and a general Jekyll support reference [here](https://www.markdownguide.org/tools/jekyll/). Also helpful is GitHub Flavored Markdown (GFM) guide found [here](https://guides.github.com/features/mastering-markdown/).
8787

88+
### Text
89+
8890
Here are some common kinds of text formatting:
8991

90-
| Formatting | Markup |
91-
|------------------------------------------|--------------------------------------------|
92-
| *italic text* | `*italic text*` |
93-
| **bold text** | `**bold text**` |
94-
| ***bold and italic text*** | `***bold and italic text***` |
95-
| `fixed width text/code` | <code>`fixed width text/code`</code> |
96-
| ~~struck-out text~~ | `~~struck-out text~~` |
97-
| [Hyperlink](https://example.com/) | `[Hyperlink](https://example.com/)` |
98-
| <span style="color: red">red text</span> | `<span style="color: red">red text</span>` |
92+
| Formatting | Markup |
93+
|----------------------------------------------------|------------------------------------------------------|
94+
| *italic text* | `*italic text*` |
95+
| **bold text** | `**bold text**` |
96+
| ***bold and italic text*** | `***bold and italic text***` |
97+
| `fixed width text/code` | <code>`fixed width text/code`</code> |
98+
| ~~struck-out text~~ | `~~struck-out text~~` |
99+
| [Hyperlink](https://example.com/) | `[Hyperlink](https://example.com/)` |
100+
| <span style="color: var(--fg-red)">red text</span> | `<span style="color: var(--fg-red)">red text</span>` |
99101

100102
Note that the last example, colored text, is not really Markdown, but rather
101103
plain {% include wikipedia title="HTML" %}. However, Markdown does not have a
102104
syntax for changing text color, and it supports mixing in HTML, so you can use
103105
the technique above if you need text in different colors.
104106

107+
### Colors
108+
109+
Rather than hardcoding colors, it is better to use preset theme-sensitive color variables, as shown above. The following color presets achieve sufficient color contrast to meet accessibility standards:
110+
111+
* <span style="color: var(--fg-red)">fg-red</span>,
112+
<span style="color: var(--fg-orange)">fg-orange</span>,
113+
<span style="color: var(--fg-yellow)">fg-yellow</span>,
114+
<span style="color: var(--fg-lime)">fg-lime</span>,
115+
<span style="color: var(--fg-green)">fg-green</span>,
116+
<span style="color: var(--fg-cyan)">fg-cyan</span>,
117+
<span style="color: var(--fg-light-blue)">fg-light-blue</span>,
118+
<span style="color: var(--fg-blue)">fg-blue</span>,
119+
<span style="color: var(--fg-purple)">fg-purple</span>,
120+
<span style="color: var(--fg-magenta)">fg-magenta</span>,
121+
<span style="color: var(--fg-pink)">fg-pink</span>,
122+
<span style="color: var(--fg-light-gray)">fg-light-gray</span>,
123+
<span style="color: var(--fg-gray)">fg-gray</span>,
124+
<span style="color: var(--fg-brown)">fg-brown</span>.
125+
* <span style="background: var(--bg-red)">bg-red</span>,
126+
<span style="background: var(--bg-orange)">bg-orange</span>,
127+
<span style="background: var(--bg-yellow)">bg-yellow</span>,
128+
<span style="background: var(--bg-lime)">bg-lime</span>,
129+
<span style="background: var(--bg-green)">bg-green</span>,
130+
<span style="background: var(--bg-cyan)">bg-cyan</span>,
131+
<span style="background: var(--bg-light-blue)">bg-light-blue</span>,
132+
<span style="background: var(--bg-blue)">bg-blue</span>,
133+
<span style="background: var(--bg-purple)">bg-purple</span>,
134+
<span style="background: var(--bg-magenta)">bg-magenta</span>,
135+
<span style="background: var(--bg-pink)">bg-pink</span>,
136+
<span style="background: var(--bg-light-gray)">bg-light-gray</span>,
137+
<span style="background: var(--bg-gray)">bg-gray</span>,
138+
<span style="background: var(--bg-brown)">bg-brown</span>.
139+
140+
Reference them using CSS's `var` syntax. Example:
141+
142+
{% capture color-preset-example %}
143+
<span style="color: var(--fg-blue);
144+
background: var(--bg-red)">
145+
&rarr; blue on red &larr;</span>
146+
{% endcapture %}
147+
{% include editing/example code=color-preset-example %}
148+
149+
### Images
150+
105151
Here are some common image uses:
106152

107153
| Image | Markup |

_pages/plugins/bigstitcher/open-existing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ You have several options of how you can select your XML dataset file:
1515
- Use the file chooser (click **Browse ...**) to select the XML file
1616
- Type or copy & paste the full path of the XML file
1717

18-
If the XML file was successfully recognized, the dialog will change and show a quick summary of the contents of the dataset (the number of views, attributes, etc...) in <span style='color:green'>green</span>:
18+
If the XML file was successfully recognized, the dialog will change and show a quick summary of the contents of the dataset (the number of views, attributes, etc...) in <span style='color:var(--fg-green)'>green</span>:
1919

2020
![BigStitcher Import exisitng 1](/media/plugins/bigstitcher/bigstitcher-import-exisitng-1.png)
2121

_pages/plugins/flimj/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ You may also change the "as" option to specify how the results are rendered. Cur
125125

126126
- **Grayscale**: Linearly maps the middle 80 percentile of the result image's values to grayscale colors from black to white. Values below the 10th percentile and above the 90th percentile are rendered black and white respectively.
127127

128-
- **Color**: Linearly maps the middle 80 percentile of the result image's values to colors from <span style="color:hsl(20,100%,50%)">`hsl(20, 100%, 50%)`</span> to <span style="color:hsl(220,100%,50%)">`hsl(220, 100%, 50%)`</span> (see color bar below). Out-of-range values follow the same rule as in **Grayscale**.
128+
- **Color**: Linearly maps the middle 80 percentile of the result image's values to colors from <span style="color:var(--fg-red)">`hsl(20, 100%, 50%)`</span> to <span style="color:var(--fg-blue)">`hsl(220, 100%, 50%)`</span> (see color bar below). Out-of-range values follow the same rule as in **Grayscale**.
129129

130130
- **Composite Color**: Takes the color mapped to by **Color** but replace the brightness with the brightness of the intensity image (on the left of the **Preview** pane). This option makes the fitted image look more uniform by deemphasizing jittery low photon count pixels.
131131

_pages/plugins/interactive-marker-controlled-watershed.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,7 @@ In this plugin the markers are introduced interactively by the user using any of
6060

6161
- **Merge labels**: merge together labels selected by either the **"freehand" selection too**l (on a single slice) **or the point tool** (on single or multiple slices). The zero-value label belongs to the watershed dams, therefore it will ignored in case of being selected. The first selected label value will be assigned to the rest of selected labels, which will share its color.
6262

63-
64-
<b><span style="color:#f80000">Note</span></b>: to select labels on different slices, use the point selection tool and keep the SHIFT key pressed each time you click on a new label.
63+
{% include notice icon="note" content="To select labels on different slices, use the point selection tool and keep the SHIFT key pressed each time you click on a new label." %}
6564

6665
- **Shuffle colors**: randomly re-assign colors to the labels. This is a very handy option whenever two adjacent labels present a similar color.
6766

_pages/plugins/morphological-segmentation.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,7 @@ When selecting "Object Image", an additional set of options is enabled to choose
4343

4444
- **Tolerance**: dynamic of intensity for the search of regional minima (in the extended-minima transform, which is the regional minima of the H-minima transform, value of h). Increasing the tolerance value reduces the number of segments in the final result, while decreasing its value produces more object splits.
4545

46-
47-
<b><span style="color:#f80000">Note</span></b>: since the tolerance is an intensity parameter, it is sensitive to the input image type. A tolerance value of 10 is a good starting point for 8-bit images (with 0-255 intensity range) but it should be drastically increased when using image types with larger intensity ranges. For example to \~2000 when working on a 16-bit image (intensity values between 0 and 65535).
46+
{% include notice icon="note" content="Since the tolerance is an intensity parameter, it is sensitive to the input image type. A tolerance value of 10 is a good starting point for 8-bit images (with 0-255 intensity range) but it should be drastically increased when using image types with larger intensity ranges. For example to \~2000 when working on a 16-bit image (intensity values between 0 and 65535)." %}
4847

4948
- **Calculate dams**: un-check this option to produce segmentations without watershed lines.
5049
- **Connectivity**: voxel connectivity (4-8 in 2D, and 6-26 in 3D). Selecting non-diagonal connectivity (4 or 6) usually provides more rounded objects.
@@ -73,8 +72,7 @@ If your segmentation is taking too long or you want **to stop it** for any reaso
7372

7473
- **Merge labels**: merge together labels selected by either the **"freehand" selection too**l (on a single slice) **or the point tool** (on single or multiple slices). The zero-value label belongs to the watershed dams, therefore it will ignored in case of being selected. The first selected label value will be assigned to the rest of selected labels, which will share its color.
7574

76-
77-
<b><span style="color:#f80000">Note</span></b>: to select labels on different slices, use the point selection tool and keep the SHIFT key pressed each time you click on a new label.
75+
{% include notice icon="note" content="To select labels on different slices, use the point selection tool and keep the SHIFT key pressed each time you click on a new label." %}
7876

7977
- **Shuffle colors**: randomly re-assign colors to the labels. This is a very handy option whenever two adjacent labels present a similar color.
8078

@@ -177,17 +175,17 @@ The complete list of commands is as follows:
177175

178176
Morphological Segmentation is part of the [MorphoLibJ](/plugins/morpholibj) library. To install it, you just need to [ add](/update-sites/following#add-update-sites) the IJPB-plugins update site:
179177

180-
1\) Select {% include bc path='Help | Update...'%} from the Fiji menu to start the updater.
178+
1. Select {% include bc path='Help | Update...'%} from the Fiji menu to start the updater.
181179

182-
2\) Click on *Manage update sites*. This brings up a dialog where you can activate additional update sites.
180+
2. Click on *Manage update sites*. This brings up a dialog where you can activate additional update sites.
183181

184-
3\) Activate the IJPB-plugins update site and close the dialog. Now you should see an additional jar file for download.
182+
3. Activate the IJPB-plugins update site and close the dialog. Now you should see an additional jar file for download.
185183

186-
4\) Click *Apply changes* and restart Fiji.
184+
4. Click *Apply changes* and restart Fiji.
187185

188186
You should now find the plugin under the sub-menu {% include bc path='Plugins | MorphoLibJ | Segmentation'%}.
189187

190-
**Note**: Morphological Segmentation is only one of the plugins included in the [MorphoLibJ](/plugins/morpholibj) library. By following these installation steps, you will be installing as well the rest of plugins in the suite.
188+
{% include notice icon="note" content="Morphological Segmentation is only one of the plugins included in the [MorphoLibJ](/plugins/morpholibj) library. By following these installation steps, you will be installing as well the rest of plugins in the suite." %}
191189

192190
## Examples
193191

_pages/plugins/photobend.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ A collection of specialized plugins for ImageJ providing tracking of a needle-li
1717

1818
{% include thumbnail src='/media/plugins/photobend-demo.gif' title='Animation of the photobend time lapse (\~1500x playback speed)'%}
1919

20-
There are two plugins in the collection providing two methods of crystal bending measurement: Bending\_Crystal\_Track and Laser\_Spot\_Track4. Both use the template matching technique based on OpenCV library to track the movement of specific targets in the series of time lapse images organized in the virtual stack. Direct usage of movies opened as image stacks is not supported currently (movies can be transformed in the image sequences with tools like ffmpeg. <span style="color:red"> UPDATE! - movies can be used directly with the Bending\_Crystal\_Track plugin! </span> Laser\_Spot\_Track4 stil requires a series of images). Timeline of the registered process is based on exif timestamps in the images or on the constant time step if the metadata are not available.
20+
There are two plugins in the collection providing two methods of crystal bending measurement: Bending\_Crystal\_Track and Laser\_Spot\_Track4. Both use the template matching technique based on OpenCV library to track the movement of specific targets in the series of time lapse images organized in the virtual stack. Direct usage of movies opened as image stacks is not supported currently (movies can be transformed in the image sequences with tools like ffmpeg. <span style="color:var(--fg-red)"> UPDATE! - movies can be used directly with the Bending\_Crystal\_Track plugin! </span> Laser\_Spot\_Track4 stil requires a series of images). Timeline of the registered process is based on exif timestamps in the images or on the constant time step if the metadata are not available.
2121

2222
There is an ability to monitor a folder for additional images appearing in the time lapse series thus allowing live process registration. The plugins work with 8/16/32-bit greyscale or 24-bit RGB images. The matching mode can be chosen from the intensity-based or color-based for the RGB format (the later is useful for images having weak intensity contrast but possessing sufficient color gradients). Subpixel registration is available using local quadratic approximation of the matching measure.
2323

assets/css/theme.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,36 @@
1818
--color-heading: #232323;
1919
--color-strong: black;
2020

21+
/* Color presets */
22+
--fg-red: #c80000;
23+
--fg-orange: #cc5500;
24+
--fg-yellow: #9a6700;
25+
--fg-lime: #4d7c00;
26+
--fg-green: #0d8000;
27+
--fg-cyan: #007373;
28+
--fg-light-blue: #0074b3;
29+
--fg-blue: #0052cc;
30+
--fg-purple: #6e3bb3;
31+
--fg-magenta: #a3008c;
32+
--fg-pink: #c7005c;
33+
--fg-light-gray: #6b6b6b;
34+
--fg-gray: #595959;
35+
--fg-brown: #7a5025;
36+
--bg-red: #ffebe9;
37+
--bg-orange: #ffedcc;
38+
--bg-yellow: #fff8cc;
39+
--bg-lime: #efffcc;
40+
--bg-green: #e3ffd9;
41+
--bg-cyan: #ccf5f5;
42+
--bg-light-blue: #e5f3ff;
43+
--bg-blue: #e0ebff;
44+
--bg-purple: #f0e6ff;
45+
--bg-magenta: #ffe6f7;
46+
--bg-pink: #ffe6f0;
47+
--bg-light-gray: #f5f5f5;
48+
--bg-gray: #e8e8e8;
49+
--bg-brown: #f5e6d3;
50+
2151
/* Links */
2252
--color-link: #0014ca;
2353
--color-link-hover: #4d959f;
@@ -111,6 +141,36 @@
111141
--color-heading: #e0e0e0;
112142
--color-strong: #f0f0f0;
113143

144+
/* Color presets */
145+
--fg-red: #ff6b6b;
146+
--fg-orange: #ff9955;
147+
--fg-yellow: #ffcc66;
148+
--fg-lime: #a8d46f;
149+
--fg-green: #66dd88;
150+
--fg-cyan: #5fd4d4;
151+
--fg-light-blue: #66bbff;
152+
--fg-blue: #6699ff;
153+
--fg-purple: #b388ff;
154+
--fg-magenta: #ff66d9;
155+
--fg-pink: #ff88b3;
156+
--fg-light-gray: #bbb;
157+
--fg-gray: #999;
158+
--fg-brown: #d4a574;
159+
--bg-red: #4d1a1a;
160+
--bg-orange: #4d2e1a;
161+
--bg-yellow: #4d4426;
162+
--bg-lime: #2e4d1a;
163+
--bg-green: #1a4d2e;
164+
--bg-cyan: #1a4040;
165+
--bg-light-blue: #1a334d;
166+
--bg-blue: #1a264d;
167+
--bg-purple: #2e1a4d;
168+
--bg-magenta: #4d1a4d;
169+
--bg-pink: #4d1a33;
170+
--bg-light-gray: #333;
171+
--bg-gray: #2a2a2a;
172+
--bg-brown: #3d2e1a;
173+
114174
/* Links */
115175
--color-link: #7aabff;
116176
--color-link-hover: #7dd0db;

0 commit comments

Comments
 (0)