ウィキメディアウィキにおけるナイトモードとの互換性に関する推奨事項

This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 43% complete.

推奨事項はウェブチームによって作成・維持されています。これらはデータ、技術的トレンド、そして我々の能力に基づいています。そのためこれらは進化し、変化する可能性があります。

標準モードとナイトモードの切り替えは、多くのウェブサイトやモバイル機器などで採用されている機能です。この機能により、ユーザーはより快適に読書できるよう詳細なコントロールが可能になります。この機能は閲覧/ウェブ/閲覧用アクセシビリティプロジェクトの一環として私達のソフトウェアに追加されます。

ウィキメディアウィキ全体で、デスクトップとモバイルサイトの利用者設定にナイトモードを導入するための取り組みが実施中です。 iOSおよびAndroid向けのWikipediaアプリには、以前からこのようなオプションが存在しました。

ナイトモードを実装する上で重要な問題は、テンプレートがどのように構築され、どのようにスタイリングされるかということです。もう1つの問題は、様々な記事においてインラインCSSスタイルとして指定された明示的な色の使用です。

編集者、特にテンプレート編集者の間でナイトモードに対する意識を高めることで、これらの問題を解決することができます。なぜなら、テンプレートは多くの記事に含まれるため、ナイトモードの互換性に大きな影響を与えるためです。

以下は、編集者が記事やテンプレートを作成する際に留意すべき一般的な推奨事項やガイドラインです。

MediaWikiで異なるテーマを使用するには？

いまのところ、URLの最後に?minervanightmode=1を追加することでナイトテーマのコンテンツの挙動を確認することができます。もしくはhttps://test.m.wikipedia.org/wiki/Special:MobileOptionsから、テストウィキ上でナイトモードを有効にすることもできます。この機能が発達するにつれ、この節を更新していきます。

推奨事項

推奨されるHTMLマークアップを使用してテンプレートを記述する

ナイトモードには、テンプレートに関する既知の普遍的な問題を自動的に解決するスタイルが同梱されています。技術的な技能を持つ編集者が少ないプロジェクトでは、これは重要です。それぞれの要素もしくはグローバルにnothemeクラスを追加することで、これらのスタイルをオプトアウトすることができます (phab:T358071)。 Projects that do not make use of these classes will likely get the feature later than others.

詳細: プロジェクト間でテンプレート内のコンポーネントのHTMLマークアップに標準化されたクラス名を使用する

WCAG AAチェックに合格した、アクセシブルな色を使う

デイモードでは、歴史的に読みにくい色が使用されてきました。ナイトモードの色を選択する際には、必ずWebAIM コントラストチェッカーで既存の色を確認してください。 Please consider modifying luminance to make the colors pass. WCAG カラーコントラストツール(Chrome, Firefox)のようなブラウザ拡張機能のインストールを検討し、wiki上のカラーコントラストの問題について意識を高めてください。

悪い例

html.skin-theme-clientpref-night .element {
    background-color: #666666;
    color: #ace;
}

良い例

html.skin-theme-clientpref-night .element {
    background-color: #383838;
    color: #ace;
}

HTMLクラスだけでなく標準的なメディアクエリを使用してナイトモードをターゲットにする

ダークモードが有効になっている場合、標準の読みやすいskin-theme-clientpref-nightクラスがHTML要素に適用されます。しかし、ナイトモードをターゲットにしたスタイルはprefers-color-schemeもターゲットにするべきです。特定のユーザーは"オペレーティングシステム"を通じてオプトインし、skin-theme-clientpref-osを通じてそれらのスタイルを適用しているかもしれないからです。 prefers-color-schemeをターゲットにすることで、両方のユーザーに対して適切なスタイルでコンテンツを表示します。

悪い例

Template:Example/styles.css

html.skin-theme-clientpref-night .pane {
    background-color: white;
    color: black;
}

良い例

Template:Example/styles.css

/* forced night mode */
html.skin-theme-clientpref-night .pane {
      background-color: black;
      color: white;
}
@media (prefers-color-scheme: dark) {
    /* automatic mode */
    html.skin-theme-clientpref-os .pane {
      background-color: black;
      color: white;
    }
}

インラインの背景色とテキスト色に静的な値を使用しない

多くのテンプレートや記事では、実際にはその必要がないのに、明示的なインラインカラーが使用されています。新しいテンプレートを作成するとき、または既存のテンプレートを見直し時は、背景やテキストのインラインカラーを削除することを検討してください。これにより、現在のスキンのスタイルがすべての要素に自動的に適用されます。

ナイトモードで記事を閲覧していて、衝突しているように見える要素(例えば、背景が真っ白な表)に気づいた場合、その要素に指定されたインラインカラーが原因である可能性が非常に高いです。その要素を出力している記事やテンプレートを見直し、インラインカラーを削除することを検討してください。

ある要素が特定の色を持つべきだと考えるなら、その様を荷適用できる適切なCSSクラス(スキンによって提供されます)を探して、より識別しやすい色を設定してください。そのようなCSSクラスが利用できない場合は、スキン開発者に新しいCSSクラスの作成を依頼することを検討してください。

Where you want to style things, it is recommended you use a stylesheet (see Help:TemplateStyles for more information) or a CSS variable.

悪い例

Template:Example

<div class="pane" style="background-color: white; color: black;">Text</div>

良い例

Template:Example

<templatestyles src="Template:Example/styles.css" />
<div class="pane">Text</div>

Template:Example/styles.css

html.skin-theme-clientpref-night .pane { background-color: white; color: black; }
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .pane { background-color: black; color: white; }
}

背景色を指定するときは文字色も指定する

背景色を指定するとき、文字色が記事の文字色と同じであれば、その色を再び定義したくないかもしれません。しかし、ナイトモードなど異なるテーマが適用された場合、意図しない結果になる可能性があります(黄色の背景に白文字など)。定義する際は、常に両方を一緒に定義することが推奨されます。この問題があるページやテンプレートを編集者が確認できるようにLintルールが提供されています。

CSS変数を使用する場合でも、使用されるコンテキストに関する仮定を避けるため、背景色と文字色を明示的に定義することが重要です。 For example, a template may be embedded inside another template / table that defines its own backgrounds or colors or their may be global styles applying to the page that may inadvertently impact your own content.

悪い例

Template:Example

<div style="background-color: yellow; padding: 16px;">Text</div>

良い例

Template:Example

<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>

Use CSS variables or CSS design tokens with fallback for background and text where possible

Recommendation is currently restricted to use inside TemplateStyles (phab:T360562, phab:T361934).

CSS variables can only be defined inside gadgets and site CSS e.g. MediaWiki:Common.css.

When using design tokens you must note that stability is currently not guaranteed and may require later changes based on phab:T340477.

When using inline styles to modify text or background, let's use a CSS design token that is supported by the skin. A list of design tokens can be found in the Codex documentation. When using the CSS variables for Codex design tokens, always provide a fallback value for skins where CSS variables are not supported.

You can also define your own CSS variables inside a gadget (for example, the default hidden night mode gadget on English Wikivoyage).

Bad example

<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>

Good example

In this example, the color-subtle design token is used, with #54595d only used as a fallback when CSS variables are not available in the skin. This gives skins with night mode the information needed to adjust the content to a suitable color.

<!-- Always define a CSS fallback value for skins which do not support Codex e.g. Monobook. -->
<span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>

Overriding night mode styles / disabling the night mode theme

In the current implementation of the Page Content Service (the service used by mobile apps to display articles), night mode works by overriding the colors of most elements with night styles, using the !important CSS property. This is precisely because of the large numbers of templates and elements that specify inline styles. In the web version, this also happens to a lesser extent (primarily on elements relating to infoboxes, navboxes and other common templates).

There may be cases where the color removal is unwarranted or where editors may disagree with the choice made. In such cases, you can include the notheme class in the element's style, which will prevent its color from being overridden (i.e. themed). This will result in the content being styled across themes (e.g. night/light/sepia) in exactly the same way.

Bad example

In this example, the theme will be overridden inside Wikimedia apps and any colors will be inverted in night mode on desktop or mobile web:

<div class="pane">Text</div>

Good example

In this example, the template has explicitly requested not to be overridden inside Wikimedia apps and the colors won't be inverted elsewhere:

<div class="pane notheme mw-no-invert">Text</div>

Apply filters to dark images with transparent background

Certain images (for example, signatures in infoboxes) tend to be black content with transparent backgrounds. In night mode, this results in unreadable SVGs because the black content will be on a dark background. To fix this, you can use a CSS invert filter (using the skin-invert or skin-invert-image class). When the thumbnail is accompanied by a caption you should use the skin-invert-image class to avoid inverting the caption as well.

Bad example

In this example this can result in a black inked signature on a black background

[[File:Tupac Shakur's signature.svg|thumb]]
[[Fichier:Gas flare fr.svg|vignette|gauche|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

Good example

Here the colors are inverted so the signature becomes white.

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[Fichier:Gas flare fr.svg|vignette|gauche|class=skin-invert-image|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]

Avoid using `background: none` or `background: transparent`

Most of the time these are unnecessary, and worse still these will interfere with automatic fixes in place for night mode for your project. These should be removed or moved to TemplateStyles if absolutely necessary to avoid color contrasting issues in the night theme.

Bad example

<div style="background: transparent;">Text with transparent background</div>

Good example

The background rule is unnecessary.

<div>Text with transparent background</div>

Acceptable example

If the background is necessary, define color: inherit as well.

<div style="background: transparent; color: inherit;">Text with transparent background</div>

Advice for editors building alternative themes

More generally, we want to encourage editors to think of templates and articles as being agnostic with respect to theming and styles. In addition to night mode, there can be any number of potential color themes, and indeed the Wikipedia mobile apps (via the Page Content Service) already offer a "sepia" theme, as well as a "black" theme intended for power-saving OLED screens.

To invert or not to invert?

An invert using CSS filters provides a quick way to convert content designed in a light theme into a darker theme. While we cannot recommend this approach for all content , it is still a useful tool that can often be utilized safely and cheaply. The Wikipedia night mode gadget uses the invert CSS filter property to style content. You can prevent an element from having colors inverted by adding the mw-no-invert class. You can also use the skin-invert class to request that the content is inverted by the software when available.

Consider patterns rather than background colors

Colorblind readers can have difficulties telling apart and recognizing small colored items. In articles, consider using patterns rather than, or in addition to, color where appropriate. Ideally, where the pattern is separate from the text. Consider using monochrome CSS Background Patterns and reading about how Trello introduced a colorblind friendly mode.

Bad example

Template:Example/styles.css

html.skin-theme-clientpref-night .ib-youtube-above {
    background-color: #B60000;
    color: white;
}

Good example

Template:Example/styles.css

html.skin-theme-clientpref-night .ib-youtube-above {
    background-image: linear-gradient(135deg, #ff1c00 25%, transparent 25%), linear-gradient(225deg, #ff1c00 25%, transparent 25%), linear-gradient(45deg, #ff1c00 25%, transparent 25%), linear-gradient(315deg, #ff1c00 25%, var(--background-color-base) 25%);
    background-position: 8px 0, 8px 0, 0 0, 0 0;
    background-size: 8px 8px;
    background-repeat: repeat-x;
}

Consider globally setting link color inside tables with background

It is quite common for editors to create tables with background colors defined on rows or columns. If the table contains links this can be problematic, as often the color choices will be tailored towards accessibility in the standard theme, or will not consider accessibility at all.

For example the links in this table are accessible in light theme but not the dark theme:


Phab ticket	Description
T360844	Links in elements with background color should become black so they are accessible
https://phabricator.wikimedia.org/T357575	File pages are not compatible with night mode

Instead of blue links inside these tables, it might be better to create blank links with underlines (to distinguish them from other text).

More information in https://phabricator.wikimedia.org/T360844

/********* General fixes for night mode *********/
/* [[phab:T360844]] */
html.skin-theme-clientpref-night [style*="background"] a {
    color: #333;
    text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os [style*="background"] a {
    color: #333;
    text-decoration: underline;
  }
}

Disabled text does not necessary need to meet color contrast guidelines

From https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be a submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

Examples

The following tickets explain fixes for various namespaces/templates and types of pages that were applied to a single project. They may be useful to other projects with similar templates or outdated copies of those templates.

Please be sure to read the associated discussion – and ask questions if you have any so other projects can benefit from sharing expertise.

General issues

Links inside table rows with background colors: phab:T360844
Tables with alternating row colors T358003

Portals

Portal:Current events

T357717

Templates / modules

Template:Color

T360683

Module:Track listing

T357730

Module:Citation https://phabricator.wikimedia.org/T359894
Template:No_article_text https://test.wikipedia.org/w/index.php?title=Template%3ANo_article_text&diff=596846&oldid=494808
Module:Message_box https://test.wikipedia.org/w/index.php?title=Module%3AMessage_box&diff=596845&oldid=579405
Licensing templates:
- Template:PD-self https://test.wikipedia.org/wiki/Template:PD-self

Messages

Please review the following messages on your wiki:

MediaWikiで異なるテーマを使用するには？

推奨事項

推奨されるHTMLマークアップを使用してテンプレートを記述する

WCAG AAチェックに合格した、アクセシブルな色を使う

HTMLクラスだけでなく標準的なメディアクエリを使用してナイトモードをターゲットにする

インラインの背景色とテキスト色に静的な値を使用しない

背景色を指定するときは文字色も指定する

Use CSS variables or CSS design tokens with fallback for background and text where possible

Overriding night mode styles / disabling the night mode theme

Apply filters to dark images with transparent background

Avoid using background: none or background: transparent

Advice for editors building alternative themes

To invert or not to invert?

Consider patterns rather than background colors

Consider globally setting link color inside tables with background

Disabled text does not necessary need to meet color contrast guidelines

Examples

General issues

Portals

Templates / modules

Messages

Avoid using `background: none` or `background: transparent`