Legibility / Template Rules

---

The Rules

Please keep in mind that text in an image must also be readable and thus follow the legibility rules on colour as well. If an artist's signature or watermark is not legible in the image, however, you may write a text version of the credits and that is fine.

---

Intro & Checklist

This thread is an in-depth review of what template legibility is, why it is important, and the Moderator Team's stance on what is and isn't okay. Here's a quick checklist of what you should be checking your template for in order to ensure good legibility:

---

Defining Colours

Defining colours properly is perhaps the most important part of making a template. Your colour choices must not result in harm to the person reading it regardless of what kind of site skin they are using. In most cases, having everything defined means you have a background colour, text colour, and link colour. Having accordions, display/hide boxes, tabbed layouts, pkmnpanels, etc. in your template mean that additional colour definitions will be required, but more on that later. Here is the code for a very basic defined template. .box1 { background-color: white; color: black; } a, a:visited { color: blue; }
Keep in mind that some colour combinations can cause harm to the viewer, and other combinations may be difficult to read. If you are unsure whether others might find your colour combination difficult to read, you can use this tool to determine your contrast ratio. The higher the first number in your contrast ratio, the easier your combination is to read. Avoid using colours that have maximum saturation. Notably bad examples of maximum saturation colours that can cause eye strain and even pain are red, cyan, and neon green. This is not a comprehensive list of "eye-burning" colours that can cause eye strain, so please use your discretion when choosing a background colour or ask a Moderator if it is okay. Additionally, if you have other elements such as tables, hide/display boxes, accordions, pkmnpanels, progress bars, or hover tips, then those need to be properly defined as well. If they are left undefined, then they may take colours from the rest of your template and become hard for someone to read. For a basic code that has these elements defined, see the next post. There is another reason why colour contrast is so important in web design. PokéFarm is host to a number of users with vision impairments and colourblindness, so it is highly recommended that content should be kept accessible by following these guidelines. To demonstrate what is meant, here are some simulations of what different colour combinations look like to people with different types of colourblindness. This is a good example of why one should always aim to use light elements on top of dark elements, and dark elements on top of light elements.

---

Accessibility

Speaking of accessibility, custom mouse cursors are a fun way to customize your templates and site skins but they are not accessibility friendly. At this time here are the rules on custom mouse cursors: Site Skins: You may change the cursor for your own view as it does not affect other players gameplay or accessibility. You may NOT distribute a site skin with a custom mouse cursor. Templates: You may NOT change the mouse cursor to a custom cursor in templates of any form. This includes, but is not limited to, forum post templates, forum signatures, or About Me templates.

---

Template Size

When making a template, it must be easily viewable on all devices. These devices come in different sizes, so your templates must be able to scale on any of them and remain legible. Likewise, the header (top) and the footer (bottom) of the template should not cause an excessive amount of scrolling just to reach the content. For this reason, the header and footer of a template should add up to be no more than 400px tall. The forum is built to display at different sizes across different device types, so your template may not easily be readable to someone else. As an example, some templates may be much too wide to display on mobile, and depending on how they're coded they may refuse to scale down properly. For this reason, we discourage you from defining a width for templates on the forum and would prefer if you allow the browser to handle it instead. You may set a width for About Me templates since they are static in size. However, please be mindful that nothing gets cut off. Using a scroll bar to solve this issue is not allowed, as this type of scroll bar doesn't work on all devices and browsers. As a note, there are only two permissible uses of a scroll bar. The first is when it contains code in plain text. This is allowed to reduce the visible space taken up by code since code is generally "gibberish" to a lot of people. Here's an example of a scrollbar in use in this acceptable way:
The second is if and only if a table would be made more legible to mobile users by the addition of a horizontal scroll bar. A vertical scroll bar is disallowed for this purpose. Here is a table with an acceptably used horizontal scroll bar.

	Header	Header	Header	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data	Data	Data	Data

---

A Note

While it's okay to dictate that users may or may not edit your code, there is one very important thing to keep in mind: A user's disallowance for edits cannot supersede the need for edits to be made for the sake of site rule or legibility compliance. That is to say, you may not stop someone from editing your code if your code breaks the rules in any way and their edits would fix it so they don't get in trouble for using that code. These edits should be restricted to adjusting only text colours or sizes, or adding art credits, but should not be significant template-redefining changes if changes are disallowed by the template creator. In the case that significant changes would have to be made in order to fix a template from a rules perspective, it should be removed rather than edited. Likewise, if you are pushing minor fixes on a template in order to fix the legibility of it, please report the original template so that moderators can ask the creator to fix it. This is so nobody else has or gets in trouble for those issues.

---

Advanced Features: Template Modes

Code exists to add multiple "modes" or variations to a single template, but please note that doing so is disallowed. A template must not change according to variables such as the site's current time, the viewer's light or dark theme settings, and so on. While this being done correctly would be a creative and interesting way to express oneself, it is more often than not extremely difficult to code a single fully legible template on the first try. Even veteran coders who have made many templates sometimes miss things. I've made a number of templates myself and missed things. Going through the legibility rules and correcting those issues takes lots of time, and so does working with users in order to correct their mistakes with their templates. It is one of the most time-consuming reports for a moderator to take because we have to allow the users a chance to fix their templates themselves, corresponding back and forth to tell them whether or not there are still issues, or if new issues have come up in the changed code. For the sake of preventing undue stress to the Moderator Team from time investment requirements of legibility reports, this kind of template may not be used.