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

This page is a translated version of the page Recommendations for night mode compatibility on Wikimedia wikis and the translation is 69% 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上のカラーコントラストの問題について意識を高めてください。

悪い例

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

良い例

@media screen {
	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 */
/* Note: If using a CSS variable, there is no need to make use of `@media screen` */
@media screen {
	html.skin-theme-clientpref-night .pane {
		background-color: black;
		color: white;
	}
}

@media screen and (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

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

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

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

CSS変数を使用する場合でも、使用されるコンテキストに関する仮定を避けるため、背景色と文字色を明示的に定義することが重要です。一例として、特定のテンプレートが独自の背景や色を定義する別のテンプレートまたは表に埋め込んであるか、ページに適用されるグローバルスタイルがあるために、誤って皆さん自身のコンテンツに影響を与える可能性があります。

悪い例

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

Phabricator で追跡中
タスク T360562
解決済

Phabricator で追跡中
タスク T361934
解決済

Phabricator で追跡中
タスク T368637
未解決

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.

ガジェット内で独自の CSS 変数の定義もできます（たとえば英語版ウィキボヤージュの場合は既定でダークモードを非表示にするガジェット）。

悪い例

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

良い例

この例では、color-subtle デザイントークンを採用、#54595d は単に外装が CSS 変数を備えていない場合のフォールバックです。 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.

悪い例

この例では、ウィキメディアのアプリ内でテーマが上書きされており、どの色もデスクトップ版もしくはモバイル版のダークモードで次のように反転表示される場合があります。

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

良い例

この例では、テンプレートからウィキメディアのアプリ内で上書きしないように特に指定してあり、配色はどこも反転されません。

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

暗い画像で背景色が透明の場合はフィルタを採用

特定の画像（たとえば基礎情報ボックス内の署名画像）はしばしば、透明な背景に黒色の内容を配しています。 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.

悪い例

この例では黒色の背景に黒インクの署名が表示される結果になるかもしれません

[[File:Tupac Shakur's signature.svg|thumb]]
[[File:Gas flare fr.svg|thumb|left|É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.]]

良い例

Here the colors are inverted so the signature becomes white.

[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[File:Gas flare fr.svg|thumb|left|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.]]

For templates with no option to specify the class, you can use a <div> tag to wrap around the template and apply the class there. For example:

<div class="skin-invert-image">
    {{multiple image|align=center|total_width=540
        |image1=...
    }}
</div>

To invert all images in a gallery , you can add either the skin-invert or skin-invert-image class to the ‎<gallery> tag, depending on the context. (If your gallery uses captions, you should use skin-invert-image to avoid inverting the caption text.)

Gallery example

<gallery class="skin-invert-image">
Tupac Shakur's signature.svg
Gas flare fr.svg|É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.
</gallery>

When `skin-invert` does not work

Certain images will not be easily invertible in night mode without losing important information (for instance, images with a dark base accompanied by bright colors). In these cases, the best option to preserve the image's original colors is probably to provide a light-colored background rather than invert the image, so that it can be seen in both day and night modes.

避けるべき指定は `background: none` と `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.

悪い例

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

良い例

背景色のルールは不用。

<div>Text with transparent background</div>

容認できる例

背景が必要な場合は、color: inheritも定義します。

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

代替テーマを構築する編集者への助言

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.

背景色よりも模様を検討する

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.

悪い例

Template:Example/styles.css

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

良い例

Template:Example/styles.css

@media screen {
	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;
	}
}

Why are links black in colored tables

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 with an underline so they are accessible
T357575	File pages are not compatible with night mode

Instead of blue links inside these tables, such links will appear as black. If this behaviour is not wanted, please revise your tables to not use inline styles.

More information in phab:T371411.

Note this behaviour only applies to article namespace. If you are using a table with different colored rows in another namespace, you should consider creating a template that provides support for making links pass WCAG AA color contrast standards. You can use Extension:TemplateStyles to style links appropriately.

無効化した文字列は必ずしも色彩のコントラストのガイドラインに従わなくても良い件

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.

ページの見た目は容認できると感じますが、ここで述べてあるルールに従っていませんよね、理由は？

個別のウィキでダークモード導入に必要な初期作業を低減するため、暫定的に複数のページに一般的な解決策をあれこれ適用し、ダークモードに準拠するのを補助しようとしたと考えられます。 These styles will eventually be removed, when wikis have adapted to the new theme.

These are listed here:

WikimediaMessages SiteAdminHelper - the site admin helper ships various styles that improve night mode support - this includes disabling/updating backgrounds and borders in elements with the class .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box, and all elements on the main page. It also enforces black text color on any element which defines an inline style with a background rule. Note, while this fixes the large majority of issues, this also causes breakage to some elements, in particular any style attribute that sets background: inherit and background: transparent.
MediaWiki:Vector-2022.css / MediaWiki:Minerva.css rules - some wikis may have adopted generalized rules that change links to black underlined text to any table element that have inline styles that apply backgrounds. For example English Wikipedia.
A local solution may have already been applied to the template you are looking at. Be sure to inspect the element and look at any associated styles provided by template styles that may be applying specific rules when the night theme classes are detected on the HTML element.

例

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.

関連文書類を必ず通読してください – それでも疑問点があったら質問してもらうと、その他のプロジェクト類の参考になるよう体験を共有してください。

全般的な課題

Links inside table rows with background colors: phab:T360844
Tables with alternating row colors T358003
Transparent SVGs in infoboxes Example fix

ポータル

Portal:Current events

T357717

テンプレートとモジュール

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
Template:Key press

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

暗い画像で背景色が透明の場合はフィルタを採用

When skin-invert does not work

避けるべき指定は background: none と background: transparent

代替テーマを構築する編集者への助言

To invert or not to invert?

背景色よりも模様を検討する

Why are links black in colored tables

無効化した文字列は必ずしも色彩のコントラストのガイドラインに従わなくても良い件

ページの見た目は容認できると感じますが、ここで述べてあるルールに従っていませんよね、理由は？

例

全般的な課題

ポータル

テンプレートとモジュール

Messages

When `skin-invert` does not work

避けるべき指定は `background: none` と `background: transparent`