mirror of
https://github.com/agdamsbo/stRoke.git
synced 2024-11-22 13:00:23 +01:00
133 lines
8.8 KiB
HTML
133 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Generated by pkgdown: do not edit by hand --><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Contrast Text Color — contrast_text • stRoke</title><!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png"><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png"><link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png"><link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png"><link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png"><script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet"><script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/font-awesome-6.4.2/css/all.min.css" rel="stylesheet"><link href="../deps/font-awesome-6.4.2/css/v4-shims.min.css" rel="stylesheet"><script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><meta property="og:title" content="Contrast Text Color — contrast_text"><meta name="description" content="Calculates the best contrast text color for a given
|
|
background color."><meta property="og:description" content="Calculates the best contrast text color for a given
|
|
background color."><meta property="og:image" content="https://agdamsbo.github.io/stRoke/logo.png"></head><body>
|
|
<a href="#main" class="visually-hidden-focusable">Skip to contents</a>
|
|
|
|
|
|
<nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">
|
|
|
|
<a class="navbar-brand me-2" href="../index.html">stRoke</a>
|
|
|
|
<small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="">24.10.1</small>
|
|
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div id="navbar" class="collapse navbar-collapse ms-3">
|
|
<ul class="navbar-nav me-auto"><li class="active nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>
|
|
<li class="nav-item dropdown">
|
|
<button class="nav-link dropdown-toggle" type="button" id="dropdown-articles" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Articles</button>
|
|
<ul class="dropdown-menu" aria-labelledby="dropdown-articles"><li><a class="dropdown-item" href="../articles/toolbox.html">Toolbox</a></li>
|
|
</ul></li>
|
|
<li class="nav-item"><a class="nav-link" href="../news/index.html">Changelog</a></li>
|
|
</ul><ul class="navbar-nav"><li class="nav-item"><form class="form-inline" role="search">
|
|
<input class="form-control" type="search" name="search-input" id="search-input" autocomplete="off" aria-label="Search site" placeholder="Search for" data-search-index="../search.json"></form></li>
|
|
<li class="nav-item"><a class="external-link nav-link" href="https://github.com/agdamsbo/stRoke/" aria-label="GitHub"><span class="fa fab fa-github fa-lg"></span></a></li>
|
|
</ul></div>
|
|
|
|
|
|
</div>
|
|
</nav><div class="container template-reference-topic">
|
|
<div class="row">
|
|
<main id="main" class="col-md-9"><div class="page-header">
|
|
<img src="../logo.png" class="logo" alt=""><h1>Contrast Text Color</h1>
|
|
<small class="dont-index">Source: <a href="https://github.com/agdamsbo/stRoke/blob/main/R/contrast_text.R" class="external-link"><code>R/contrast_text.R</code></a></small>
|
|
<div class="d-none name"><code>contrast_text.Rd</code></div>
|
|
</div>
|
|
|
|
<div class="ref-description section level2">
|
|
<p>Calculates the best contrast text color for a given
|
|
background color.</p>
|
|
</div>
|
|
|
|
<div class="section level2">
|
|
<h2 id="ref-usage">Usage<a class="anchor" aria-label="anchor" href="#ref-usage"></a></h2>
|
|
<div class="sourceCode"><pre class="sourceCode r"><code><span><span class="fu">contrast_text</span><span class="op">(</span></span>
|
|
<span> <span class="va">background</span>,</span>
|
|
<span> light_text <span class="op">=</span> <span class="st">"white"</span>,</span>
|
|
<span> dark_text <span class="op">=</span> <span class="st">"black"</span>,</span>
|
|
<span> threshold <span class="op">=</span> <span class="fl">0.5</span>,</span>
|
|
<span> method <span class="op">=</span> <span class="st">"perceived_2"</span>,</span>
|
|
<span> <span class="va">...</span></span>
|
|
<span><span class="op">)</span></span></code></pre></div>
|
|
</div>
|
|
|
|
<div class="section level2">
|
|
<h2 id="arguments">Arguments<a class="anchor" aria-label="anchor" href="#arguments"></a></h2>
|
|
|
|
|
|
<dl><dt id="arg-background">background<a class="anchor" aria-label="anchor" href="#arg-background"></a></dt>
|
|
<dd><p>A hex/named color value that represents the background.</p></dd>
|
|
|
|
|
|
<dt id="arg-light-text">light_text<a class="anchor" aria-label="anchor" href="#arg-light-text"></a></dt>
|
|
<dd><p>A hex/named color value that represents the light text
|
|
color.</p></dd>
|
|
|
|
|
|
<dt id="arg-dark-text">dark_text<a class="anchor" aria-label="anchor" href="#arg-dark-text"></a></dt>
|
|
<dd><p>A hex/named color value that represents the dark text color.</p></dd>
|
|
|
|
|
|
<dt id="arg-threshold">threshold<a class="anchor" aria-label="anchor" href="#arg-threshold"></a></dt>
|
|
<dd><p>A numeric value between 0 and 1 that is used to determine
|
|
the luminance threshold of the background color for text color.</p></dd>
|
|
|
|
|
|
<dt id="arg-method">method<a class="anchor" aria-label="anchor" href="#arg-method"></a></dt>
|
|
<dd><p>A character string that specifies the method for calculating
|
|
the luminance. Three different methods are available:
|
|
c("relative","perceived","perceived_2")</p></dd>
|
|
|
|
|
|
<dt id="arg--">...<a class="anchor" aria-label="anchor" href="#arg--"></a></dt>
|
|
<dd><p>parameter overflow. Ignored.</p></dd>
|
|
|
|
</dl></div>
|
|
<div class="section level2">
|
|
<h2 id="value">Value<a class="anchor" aria-label="anchor" href="#value"></a></h2>
|
|
<p>A character string that contains the best contrast text color.</p>
|
|
</div>
|
|
<div class="section level2">
|
|
<h2 id="details">Details<a class="anchor" aria-label="anchor" href="#details"></a></h2>
|
|
<p>This function aids in deciding the font color to print on a given background.
|
|
The function is based on the example provided by teppo:
|
|
https://stackoverflow.com/a/66669838/21019325.
|
|
The different methods provided are based on the methods outlined in the
|
|
StackOverflow thread:
|
|
https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color</p>
|
|
</div>
|
|
|
|
<div class="section level2">
|
|
<h2 id="ref-examples">Examples<a class="anchor" aria-label="anchor" href="#ref-examples"></a></h2>
|
|
<div class="sourceCode"><pre class="sourceCode r"><code><span class="r-in"><span><span class="fu">contrast_text</span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"#F2F2F2"</span>, <span class="st">"blue"</span><span class="op">)</span><span class="op">)</span></span></span>
|
|
<span class="r-out co"><span class="r-pr">#></span> [1] "black" "white"</span>
|
|
<span class="r-in"><span></span></span>
|
|
<span class="r-in"><span><span class="fu">contrast_text</span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span><span class="st">"#F2F2F2"</span>, <span class="st">"blue"</span><span class="op">)</span>, method<span class="op">=</span><span class="st">"relative"</span><span class="op">)</span></span></span>
|
|
<span class="r-out co"><span class="r-pr">#></span> [1] "black" "white"</span>
|
|
</code></pre></div>
|
|
</div>
|
|
</main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>
|
|
</nav></aside></div>
|
|
|
|
|
|
<footer><div class="pkgdown-footer-left">
|
|
<p>Developed by Andreas Gammelgaard Damsbo.</p>
|
|
</div>
|
|
|
|
<div class="pkgdown-footer-right">
|
|
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.1.</p>
|
|
</div>
|
|
|
|
</footer></div>
|
|
|
|
|
|
|
|
|
|
|
|
</body></html>
|
|
|