Skip to content

Commit

Permalink
Restore customize-design file
Browse files Browse the repository at this point in the history
  • Loading branch information
remibetin committed Apr 25, 2024
1 parent c2c31cc commit ba30445
Showing 1 changed file with 123 additions and 0 deletions.
123 changes: 123 additions & 0 deletions pages/wai-customize-design.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
---
title: How to Change Text Size or Colors
lang: en
layout: default
parent: "/"
permalink: /meta/customize/
github:
repository: w3c/wai-website
path: 'pages/wai-customize-design.md'
label: wai-customize-design
license: creative-commons
feedbackmail: [email protected]
footer: >
<p><strong>Date:</strong> Updated 4 March 2019. First published 2005.</p>
<p><strong>Editors:</strong> Robert Jolly and Shawn Lawton Henry.</p>
---

<div style="font-size:1.4rem; font-weight:bold;" markdown="1">

To make text bigger, press two keys at the same time:

* **Ctrl** _and_ **+** keys in Windows, Linux, and Chrome OS
* **** _and_ **+** keys in Mac OS

</div>

{::nomarkdown}
{% include box.html type="start" title="Summary" class="" %}
{:/}

This page shows you how to change text size, text and background colors, and other display settings through your browser.

{::nomarkdown}
{% include box.html type="end" %}
{:/}

{::nomarkdown}
{% include toc.html type="start" title="Page Contents" %}
{:/}

- TOC is created automatically.
{:toc}

{::nomarkdown}
{% include toc.html type="end" %}
{:/}

## Change Text Size with Zoom

<p>Most web browsers let you increase and decrease the size of text, images, and other web page content with "zoom" features. Some browsers let you choose to zoom only the text size.</p>
<p>To change the zoom in most browsers, press the following two keys at the same time:</p>
<ul>
<li>In Windows, Linux, and Chrome OS:
<ul>
<li>To zoom bigger: "Ctrl" and "+" keys</li>
<li>To zoom smaller: "Ctrl" and "-" keys</li>
</ul>
</li>
<li>Mac OS:
<ul>
<li>To zoom bigger: "⌘" and "+" keys</li>
<li>To zoom smaller: "⌘" and "-" keys</li>
</ul>
</li>
</ul>

Browsers provide specific guidance on different ways to change the page zoom or text-only zoom:

* [Google Chrome - Change text, image, and video sizes (zoom)](https://support.google.com/chrome/answer/96810)
* [Apple Safari - Zoom in on webpages](https://support.apple.com/guide/safari/zoom-in-on-webpages-ibrw1068/mac)
* [Mozilla Firefox - Font size and zoom](https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages)
* [Opera - Zoom](https://help.opera.com/en/latest/browser-window/#zoom)
* [Internet Explorer - Ease of access options](https://support.microsoft.com/en-us/help/17456/windows-internet-explorer-ease-of-access-options)
* [Microsoft Edge - Ease of Access in Microsoft Edge](https://support.microsoft.com/en-gb/help/4000734/windows-10-microsoft-edge-ease-of-access)
* [Vivaldi - Zooming options in Vivaldi](https://help.vivaldi.com/article/zooming-options-in-vivaldi/)

## Other Text and Color Changes

Some browsers provide functionality to set different aspects of font and color in the default view.

* [Mozilla Firefox - Change the fonts and colors websites use](https://support.mozilla.org/en-US/kb/change-fonts-and-colors-websites-use)
* [Opera - Look and feel > Fonts](https://help.opera.com/en/presto/look-and-feel/#fonts)
* [Microsoft Internet Explorer - Ease of Access Options](https://support.microsoft.com/en-us/help/17456/windows-internet-explorer-ease-of-access-options)

Other text and color settings are available in Reader View.

## Reader View

Most browsers offer a "Reader View" or "Reading View" that shows just the main content; it gets rid of navigation, ads, etc. Some browsers let you set the text font, text size, text color, background color, and line spacing in Reader View.

* [Apple Safari - Hide ads when reading articles](https://support.apple.com/en-ca/guide/safari/hide-ads-when-reading-articles-sfri32632/mac)
* [Mozilla Firefox - Reader View for clutter-free web pages](https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages)
* [Microsoft Edge - Change font style and size for Reading view in Microsoft Edge](https://support.microsoft.com/en-us/help/4028023/microsoft-edge-change-font-style-and-size-for-reading-view)
* [Vivaldi - Reader View](https://help.vivaldi.com/article/reader-view/)

## Advanced Options

There are many browser extensions and add-ons that provide additional control over how the browser displays text and other content.

While most browsers no long support user style sheets, extensions provide similar advanced user control. For example, the Stylus extension is available for several major browsers.

## More Information

### Why doesn't this work with some other websites?

The browser settings on this page should work when websites and browsers meet **[accessibility guidelines](/standards-guidelines/)** and are designed for accessibility, flexibility, and user control. However:
* **some websites are designed to defeat user's browser settings**
* **some browsers do not provide as much user control**

Text resizing, browser zoom, and other user choices may not work consistently on websites that do not meet accessibility guidelines.

### Should all websites include instructions like this?

It's up to the website owner. It's not an accessibility requirement that websites include information on changing text sizes and colors like this page. We chose to include this information to help people who want to know how to change their browser settings.

### Should websites provide a widget to change text, color, etc.

We chose to provide these instructions so that users can learn how to change the display for all websites. Widgets change only the website they are on.

### Note: No Endorsement

The World Wide Web Consortium (W3C) does not endorse specific web browsers or extensions and does not recommend one over another. While some common browsers are included in this page, mention of a specific browser does not imply endorsement or recommendation.

0 comments on commit ba30445

Please sign in to comment.